CSS中填充屬性是指元素內部內容與元素邊界之間的距離,也可稱為內邊距(padding)。
padding: 上 右 下 左;
其中每個值對應元素上、右、下、左四個方向的填充大小。填充大小可以使用長度單位(像素、百分比等)或關鍵字(auto)指定。
簡寫方式也是支持的:
padding: 上下 左右; padding: 上 右下 左; padding: 上 右下 左;
填充屬性的默認值是 0,表示元素內部內容貼著元素邊界。
填充屬性的應用方式很廣泛。可以通過設置填充屬性來改變元素的大小、形狀、間距等。
div { padding: 20px; }
上下左右填充都是20px,會把元素的大小擴充40px。
div { padding-top: 10%; padding-right: 20px; padding-bottom: 30px; padding-left: 5%; }
使用各個方向的單獨設置,可以針對性地調整元素的填充值。
除了填充屬性,CSS中還有邊框屬性和外邊距屬性。邊框屬性指的是元素的邊框樣式、顏色、寬度等。常用的邊框屬性有border、border-style、border-width等。外邊距屬性指的是元素與周圍元素之間的距離,可以使用margin屬性設置。
當元素涉及到多個性質(填充、邊框、外邊距)時,建議使用相應的縮寫屬性進行設置,可以方便地減少代碼量和降低維護難度。
div { padding: 20px; border: 1px solid #000; margin: 10px auto; }
以上代碼同時設置了填充、邊框和外邊距,實現了快速布局元素的目的。
上一篇java c php