在使用CSS設計一排方塊時,有時候不可避免地會遇到方塊邊框重合的問題。這種問題可能會導致我們的設計效果不盡如人意,因此必須找到解決方案。
.box { display: inline-block; width: 100px; height: 100px; border: 1px solid #000; margin-right: -1px; }
為了解決方塊邊框重合的問題,我們可以通過給每個方塊添加一個負的外邊距(margin),再將邊框寬度設置為1像素,就可以避免方塊邊框重合的問題了。我們可以采用如下CSS代碼:
.box { display: inline-block; width: 100px; height: 100px; border: 1px solid #000; margin-right: -1px; }
在這個代碼中,我們給每個方塊添加了負的外邊距,而邊框寬度仍然保持為1像素。這樣做的結果是每個方塊都會多出1像素的空隙,正是這個空隙避免了方塊邊框重合的問題。
最后需要注意的是,在第一排方塊的左側沒有邊距,因此我們只需要將第二排方塊的左側外邊距設為負值就可以了。這樣設計的一排方塊就可以完美地呈現出來了。
上一篇css 一列變成多列