問題
7【padding】内側に余白を作ろう
この問題では、Web制作で頻繁にしようする内側の余白をあけるCSSプロパティ「padding」について学習していきます。 paddingとmarginの違いをしっかり理解しておきましょう。
ポイント
paddingとは
paddingとは、要素の内側に余白を作る際に使用するCSSプロパティです。
全ての要素には、表示領域とその境界線、余白があり、この3つを合わせた領域のことをボックスと言います。
このボックスの内側の余白を調整するプロパティがpaddingです。
paddingには負の値やautoを指定することはできません。
paddingの指定方法
paddingプロパティで余白を指定する場合は以下のように使用します。
1．上下左右すべてを同じ余白にする場合
padding: 10px;
2．上下と左右の余白を変える場合
padding: 10px 20px;
（左が上下、右が左右）
3．4方向全ての余白を変える場合
padding: 10px 20px 30px 40px;
（左から上、右、下、左）
4．個別で指定する場合
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
CSSの問題に挑戦しよう！
問題
「【padding】内側に余白を作ろう」
boxの中に余白を入れて'ninjacode'という文字列を見本画像のような位置になるように調整してみてください。
あらかじめエディタに書くコード
<div class="box">
ninjacode
</div>
¥HTML¥
.box {
width: 300px;
border: solid 2px black;
background: white;
color: black;
}
¥CSS¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
内側の余白を調整するpaddingプロパティも基本中の基本といえる要素の一つです。
ボタンを作成する際にもよく使用されています。
paddingの特徴はborderで作った線とコンテンツテキストの間に余白を作るという事です。backgroundなどで色付けがされていないと、見分けが非常に難しいです。
このような場面では、Googlechromeなどのブラウザで用意されているデベロッパーツール(検証ツール)を使用することで簡単に見分けることができます。
使わない手はないので、必須で使い方を学んでおきましょう!
補足
paddingもborder等と同様、ショートハンドで記述することができます。
上、右、下、左の順番で続けて記述します。
1方向だけに余白を空けたい場合は、単体のプロパティを使うか、残りの3方向を0で指定するかで設定できます。
例えば左方向にだけ20pxの余白を空けたい場合は、
padding-left: 20px;とするか、padding: 0 0 0 20px;とします。
