默認情況下,在每個塊中內容的內邊距都是為 0 的,我們可以通過 padding 屬性為其設置內邊距。
屬性值為 數字 加 單位像素(px)
padding-top 代表距上內邊距,我們為其設置值之后,塊中的內容距離上邊框的距離就等于 padding-top 的屬性值。
padding-right 代表距右內邊距,為其設置值之后,塊中的內容距離右邊框的距離就等于 padding-right 的屬性值。
padding-bottom 代表距下內邊距,為其設置值之后,塊中的內容距離下邊框的距離就等于 padding-bottom 的屬性值。
padding-left 代表距左內邊距,為其設置值之后,塊中的內容距離左邊框的距離就等于 padding-left 的屬性值。
直接使用 padding 也可以設置內邊框,有多種取值方式。
利用四個屬性值的表示方法,代表著按照順時針方向設置四個方向的內邊距,即第一個代表距上邊內邊距,第二個代表距右邊內邊距,第三個代表距下邊內邊距,第四即距左邊內邊距。格式為 padding:top right bottom left;
利用三個屬性值的表示方法,代表著按照順時針方向設置三個方向的內邊距,跟四個屬性值時前三個的表示相同,第四個(即距左邊內邊距)省略掉,這個時候距左邊內邊距的屬性值將等于距離右邊內邊距的屬性值。格式為 padding:top right bottom;
利用兩個屬性值的表示方法,第一個屬性值代表著距上邊的內邊距,第二個屬性值帶擺著距右邊的內邊距。這里的距下內邊距和距左內邊距都有對應的屬性值,距下邊內邊距的屬性值等于距上邊內邊距,距左內邊距的屬性值等于距右內邊距的屬性值。格式為 padding:top right;
直接利用單個屬性值的表示方法,代表著四個方向的內邊距都相同。
如果塊中的空間已被內容填滿,添加內邊距將會撐大塊的體積,為塊添加背景顏色時,內邊距撐開的地方也將會被添加上背景顏色。
新聞熱點
疑難解答