CSS中的塊級元素間隔(margin)是指在文檔流中,兩個塊級元素之間的距離。它是通過設置元素的margin屬性來實現的。
margin屬性具有四個值:margin-top,margin-right,margin-bottom和margin-left。分別控制元素的上、右、下和左邊距。我們可以將它們設置為固定的數值,如像素(px),或是百分比。
/* 設置元素四個方向的邊距 */ div { margin-top: 10px; margin-right: 20%; margin-bottom: 5rem; margin-left: 30px; }
有一個有用的屬性叫做margin-collapse,它指定了margin如何折疊(collapse)在相鄰元素之間。當兩個相鄰的塊級元素都有margin時,它們的邊距會合并為一個值。當兩個元素之間的邊距都為正值時,它們會相加,形成一個更大的間距。如果其中有一個邊距為負值,那么較小的邊距將被使用。
/* 相鄰元素的margin合并 */ h1 { margin-bottom: 20px; } p { margin-top: 30px; } /* 在h1和p之間的間距為20px,而不是50px */
最后,我們需要了解的是盒模型(box model)。每個塊級元素都被認為是一個矩形的盒子,盒子本身具有一個內部區域,由邊框、內邊距和內容組成。我們可以通過設置padding和border屬性來調整盒子的大小和樣式。
/* 設置元素內邊距和邊框 */ div { padding: 10px; border: 1px solid black; }
在CSS中,塊級元素間隔是一個重要的概念。通過設置合適的margin、padding和border屬性,我們可以創建出漂亮而有意義的頁面。