在CSS中,填充(padding)是一個非常重要的屬性,用于在元素的內(nèi)容和邊界之間添加空間,填充可以通過以下方式設(shè)置:
1、使用padding
屬性設(shè)置元素的所有四個方向的填充。
div { padding: 10px; }
這將為div
元素的所有四個方向添加 10 像素的填充。
2、使用padding-top
、padding-right
、padding-bottom
和padding-left
屬性分別設(shè)置每個方向的填充。
div { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }
這將為div
元素的每個方向添加不同的填充。
3、使用百分比(%)單位設(shè)置填充。
div { padding: 5%; }
這將為div
元素的所有四個方向添加 5% 的填充,注意,百分比填充是基于元素的寬度和高度的。
4、使用box-sizing
屬性改變填充的計算方式,默認(rèn)情況下,填充是在元素的寬度和高度內(nèi)部計算的,但可以通過設(shè)置box-sizing
屬性為border-box
來改變這一點:
div { box-sizing: border-box; padding: 10px; }
這將使填充包含在元素的寬度和高度內(nèi),而不是在內(nèi)容的寬度和高度內(nèi)計算。
是CSS中填充的基本用法和設(shè)置方式,通過合理的使用填充,可以輕松地控制元素的大小和外觀。