CSS padding 內距屬性與用法範例 留白
我們從盒子模式那一頁看到,留白 (padding) 是在內容外,邊框內的部分。一個盒子有四個邊,所以我們可以對這四個邊的留白逐一設定:padding-top (上) padding-right (右) padding-bottom (下) padding-left (左),
padding:[上面] [右邊] [下面] [左邊],
padding:[上方與下方距離] [左方與右方距離],
padding:[上方距離] [左方與右方距離] [下方距離],
padding:[四個方位的距離],
<div style="background-color: dodgerblue; padding: 10px; width: 50%;">
<div style="background-color: #ffd78c; height: auto; ">
<div style="background-color: #ffd78c; height: auto; ">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding: 10px 20px 50px 100px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding: 10px 50px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding-top: 30px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
沒有留言:
張貼留言