ログイン
問題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の問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、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プロパティも基本中の基本といえる要素の一つです。
ボタンを作成する際にもよく使用されています。
paddingの特徴はborderで作った線とコンテンツテキストの間に余白を作るという事です。backgroundなどで色付けがされていないと、見分けが非常に難しいです。
このような場面では、Googlechromeなどのブラウザで用意されているデベロッパーツール(検証ツール)を使用することで簡単に見分けることができます。
使わない手はないので、必須で使い方を学んでおきましょう!
ログインして解答を見る

コメントのアイコン補足

paddingもborder等と同様、ショートハンドで記述することができます。
上、右、下、左の順番で続けて記述します。
1方向だけに余白を空けたい場合は、単体のプロパティを使うか、残りの3方向を0で指定するかで設定できます。
例えば左方向にだけ20pxの余白を空けたい場合は、
padding-left: 20px;とするか、padding: 0 0 0 20px;とします。
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!