window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

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>

沒有留言:

張貼留言