CSS布局中填充(padding)是一個重要的概念。不同于邊距(margin),填充是指元素內部邊緣與內容之間的距離。填充的應用可以創造出各種各樣的布局效果。
.example { padding: 20px; /* 上下左右都是20像素的填充 */ } .example { padding-top: 10px; /* 上方10像素的填充 */ padding-bottom: 15px; /* 下方15像素的填充 */ padding-left: 5px; /* 左側5像素的填充 */ padding-right: 0px; /* 右側無填充 */ } .example { padding: 10px 20px; /* 上下各10像素,左右各20像素的填充 */ } .example { padding: 5px 10px 15px; /* 上5像素,左右各10像素,下15像素的填充 */ } .example { padding: 0px; /* 無填充 */ }
如上代碼所示,使用padding屬性可以控制元素的填充。填充的取值可以是單個值、兩個或三個值甚至四個值,依次代表上、右、下、左四個方向的填充。通過合理運用padding屬性,可以輕松地實現列中填充的效果,讓網站更加美觀實用。