CSS padding 內距屬性與用法範例 留白

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; ">

<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: dodgerblue; padding: 10px 50px; width: 50%;">
<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>