1. 程式人生 > >CSS進階(三)padding

CSS進階(三)padding

方向 圖片 小技巧 相對 水平 src -h color 點擊區域

內聯元素padding是有作用的

設置內聯級元素如a的垂直方向的padding,不僅能夠增加點擊區域的大小,也不會影響到整體的布局

padding的百分比值

padding的百分比值無論是水平方向還是垂直方向,均是相對於寬度計算的

內聯元素的垂直Padding會讓幽靈元素空白節點顯現

小技巧

(1)<ul><ol>設置padding-left:22px是一個比較好的padding-left值

(2)很多表單元素內置padding,比如Button,但是在不同瀏覽器下的實現效果並不一樣,替代方案:

<button id="btn"></button>
<label for="btn">按鈕</label> <style> button { position: absolute; clip: rect(0 0 0 0); } label { display: inline-block; line-height: 20px; padding: 10px; } </style>

結合background-clip實現的效果

技術分享圖片

CSS進階(三)padding