padding: ***;
padding:***;は要素の外枠に対して、上下左右の余白を設定するプロパティです。
パディングを設定すると、外枠から内側に対して余白を空けて、内容を表示します。
▼CSS
div {
padding: 5px 10px 15px 20px;
}
▼HTML
<div> 外側の枠から上5px、右10px、下15px、左20pの余白を開けて表示します。x <img src="../images/sample.jpg"> </div>
▼marginとpaddingの違い
marginと混同されやすいですが、以下のような区別があります。
値の書き方には何種類かあります。
上下左右個別に設定 | 上、右、下、左の順に値を設定 | padding:5px 10px 15px 20px; |
---|---|---|
上下と左右それぞれに設定 | 上下、左右の順に値を設定 | padding:10px 15px; |
全て同じマージンを設定 | 上下左右の値を設定 | padding:15px; |