html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月12日 星期一

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>

沒有留言:

張貼留言