在CSS中,有一類屬性稱為“不填充”屬性,它們的作用是控制元素的內容與邊框之間的距離,而不是直接改變元素的尺寸或位置。這些屬性比較常見,也比較重要,包括:
margin padding border outline
首先是margin(外邊距)屬性,它可以給元素周圍留出空白區域,使元素與其它元素之間產生間隔。可以使用margin來控制元素之間的間距、排列方式等等。例如,可以為某個元素設置
margin: 10px;
這會將該元素的周圍留出10個像素的空白區域。
接下來是padding(內邊距)屬性,它可以控制元素內容與邊框之間的距離。使用這個屬性時需要注意,將元素的padding設置過大會使其尺寸變化,但并不會改變其在文檔中的位置。例如,可以給某個元素設置
padding: 5px;
這會使該元素的內容與邊框之間留出5個像素的空白區域。
然后是border(邊框)屬性,可以用來為元素設置邊框。它有3個子屬性分別是border-color、border-style和border-width,這三個屬性必須分別設置,否則無效。例如,可以為某個元素設置一個紅色、實心、寬度為1像素的邊框:
border: 1px solid red;
最后是outline(輪廓線)屬性,它可以在元素的邊緣上描繪一條線,通常用來顯示當前的活動元素。outline有3個子屬性分別是outline-color、outline-style和outline-width,經常被用來高亮某個元素。例如,可以為某個元素設置一個藍色、虛線、寬度為2像素的輪廓:
outline: 2px dashed blue;
這幾個屬性的應用非常廣泛,在網頁布局中扮演著重要的角色。熟練掌握它們的用法和效果,對于前端開發人員來說是非常必要的。