CSS填充(padding)是指往一個元素的邊框和內容之間添加空間。這個空間可以用來放置背景圖,以及增加觀看體驗。CSS填充有各種不同的屬性可以控制大小和方向。
.example { /*添加10像素的上,下,左,右填充*/ padding: 10px; /*添加20像素的上填充,40像素的右填充*/ padding: 20px 40px; /*添加10像素的上填充,30像素的右填充,50像素的下填充,70像素的左填充*/ padding: 10px 30px 50px 70px; }
您還可以為填充設置單獨的屬性:
.example { padding-top: 20px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }
指定填充方向和大小的另一種方法是使用css3的邊框盒子模型(box-sizing)屬性。默認情況下,元素的寬度和高度包括填充和邊框,從而導致元素的實際內容區域不一定是您指定的大小。通過將box-sizing設置為border-box,元素的實際寬度和高度將包括填充和邊框。
.example { box-sizing: border-box; padding: 10px; }
最后,您還可以使用填充來創建響應式設計。當您使用百分比填充時,填充將根據元素的寬度自動縮放。
.example { padding: 5% 10%; }
通過使用這些技術,您可以輕松地創建專業的、高效的webdesigns,為您的讀者提供優質體驗。