padding:***;
padding: ***;は要素の外枠に対して、上下左右の余白を設定するプロパティです。
td要素に設定すると、セル枠の内側の余白を設定することができます。
▼CSS
td {
padding:10px;
}
▼HTML
<table>
<tr>
<td>セル枠から内側に10pxの余白があります。</td>
<td>セル枠から内側に10pxの余白があります。</td>
</tr>
<tr>
<td>セル枠から内側に10pxの余白があります。</td>
<td>セル枠から内側に10pxの余白があります。</td>
</tr>
</table>
▼表示
セル枠から内側に10pxの余白があります。 | セル枠から内側に10pxの余白があります。 |
セル枠から内側に10pxの余白があります。 | セル枠から内側に10pxの余白があります。 |
▽paddingを20pxに設定した場合
セル枠から内側に20pxの余白があります。 | セル枠から内側に20pxの余白があります。 |
セル枠から内側に20pxの余白があります。 | セル枠から内側に20pxの余白があります。 |
値の書き方には何種類かあります。
上下左右個別に設定 | 上、右、下、左の順に値を設定 | padding:5px 10px 15px 20px; |
---|---|---|
上下と左右それぞれに設定 | 上下、左右の順に値を設定 | padding:10px 15px; |
全て同じマージンを設定 | 上下左右の値を設定 | padding:15px; |
marginと混同されやすいですが、以下のような区別があります。