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