CSS
LINEでログイン
Googleでログイン
Twitterでログイン
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の問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題7：【padding】内側に余白を作ろう
boxの中に余白を入れて'ninjacode'という文字列を見本画像のような位置になるように調整してみてください。
あらかじめエディタに書くコード
<div class="box">
ninjacode
</div>
¥HTML¥
.box {
width: 300px;
border: solid 2px black;
background: white;
color: black;
}
¥CSS¥
期待する画面
解答ソースコード
.box {
width: 300px;
border: solid 2px black;
background: white;
color: black;
padding: 20px 50px;
}
¥CSS¥
補足
paddingもborder等と同様、ショートハンドで記述することができます。
上、右、下、左の順番で続けて記述します。
1方向だけに余白を空けたい場合は、単体のプロパティを使うか、残りの3方向を0で指定するかで設定できます。
例えば左方向にだけ20pxの余白を空けたい場合は、
padding-left: 20px;とするか、padding: 0 0 0 20px;とします。
上、右、下、左の順番で続けて記述します。
1方向だけに余白を空けたい場合は、単体のプロパティを使うか、残りの3方向を0で指定するかで設定できます。
例えば左方向にだけ20pxの余白を空けたい場合は、
padding-left: 20px;とするか、padding: 0 0 0 20px;とします。
完了にする！
活動記録をTweetする
ボタンを作成する際にもよく使用されています。
paddingの特徴はborderで作った線とコンテンツテキストの間に余白を作るという事です。backgroundなどで色付けがされていないと、見分けが非常に難しいです。
このような場面では、Googlechromeなどのブラウザで用意されているデベロッパーツール(検証ツール)を使用することで簡単に見分けることができます。
使わない手はないので、必須で使い方を学んでおきましょう!