スポンサード リンク
paddingプロパティ
html要素の枠線の内側に余白を指定します使い方(書式)
セレクタ { padding: 値; }
paddingプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
単位 | px、emなどの単位 |
% | パーセンテージで指定。要素が表示できる幅に対しての割合 |
0 | 余白なし |
値の数 | 説明 |
値が1つ | 「上下左右」のpaddingを一括で指定する |
値が2つ | 「上下」「左右」 1つ目が上下、2つ目が左右のpadding |
値が3つ | 「上」「左右」「下」 1つ目が上、2つ目が左右、3つ目が下のpadding |
値が4つ | 「上」「右」「下」「左」 1つ目が上、2つ目が右、3つ目が下、4つ目が左のpadding |
実際の指定方法
.hoge { padding: 30px; } /* 上下左右の値を一括指定 */
.hoge2 { padding: 20px 10px; } /* 上下、左右の値を指定 */
.hoge3 { padding: 20px 30px 15px; } /* 上、左右、下の値を指定 */
.hoge4 { padding: 20px 40px 10px 60px; } /* 上右下左の値を1つずつ指定 */
html部分
<div class="hoge">padding: 30px; 上下左右の値を一括指定</div> <div class="hoge2">padding: 20px 10px; 上下、左右の値を指定</div> <div class="hoge3">padding: 20px 30px 15px; 上、左右、下の値を指定</div> <div class="hoge4">padding: 20px 40px 10px 60px; 上、右、下、左の値を1つずつ指定</div>
実際の表示(わかりやすいように枠線をつけています)
marginとpaddingの違い
paddingがHTML要素の内側の余白を指定しているのに対して、marginは指定した要素の外側の余白を指定しますcss
.hogebox { border: 1px solid #000; } /* 要素の外のboxに枠線をつけました */ .padding { margin: 20px; /* 要素の外側の余白を一括指定 */ padding: 30px; /* 要素の内側の余白を一括指定 */ border: 1px solid #000; /* 枠線をつけました */ }
html部分
<div class="hogebox">margin: 20px; html要素の枠の外側の余白 <div class="padding">padding: 30px; html要素の枠の内側の余白</div> </div>
実際の表示(わかりやすいように枠線をつけています)