CSS邊距是指在元素周圍的間隔或空間。邊距可以通過margin屬性和padding屬性進行控制。margin是元素與相鄰元素之間的空間,padding是元素內容和元素邊界之間的空間。在某些情況下,有時候希望清除邊距,也就是讓兩個元素直接貼在一起。
清除margin的方法是使用CSS重置或者初始化CSS樣式。CSS重置顧名思義是清空瀏覽器的默認樣式。重置樣式表可以清除所有元素的margin和padding屬性。
*{ margin: 0; padding: 0; }
這里使用通用選擇器*,會選中頁面上的所有元素。所以,這種方法不夠高效,一般使用在項目的初始化中。這樣的好處是可以自己編寫需要的CSS樣式,更加符合自己的需求。
還可以只清除特定元素的margin屬性或者將其設置為0。比如要清除一個
div{ margin: 0; }
除了使用margin:0清除margin屬性,還可以使用margin: -1px。不過需要了解的是,這種方法可能會對布局產生負面影響。因為這種方法是利用了負的margin值消除元素之間的縫隙,但是不同瀏覽器對負margin值的解釋不一樣。
另外,使用box-sizing可以消除padding帶來的影響,box-sizing有兩個取值:content-box和border-box。默認值是content-box,這種情況下,元素實際的寬度是width+padding+border,這樣會影響到元素的計算。而使用border-box,元素的寬度就是width,不包括padding和border。這種方法可以更加準確地控制元素的大小。
div{ box-sizing: border-box; }
總結一下,清除margin可以通過CSS重置或者直接設置為0。使用box-sizing可以消除padding的影響。具體選擇哪種方法,需要根據具體情況而定。最好做到盡量不影響布局,并且能夠適應大多數瀏覽器。