CSSスキル - 第4章 Lesson5

内側の余白を調整するpaddingプロパティの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

内側の余白を調整するpaddingプロパティについて、初心者向けに解説しています。



この動画で学べること

・padding(内側の余白)をつける方法



padding(内側の余白)をつける方法

paddingは、コンテンツとボーダーとの間にとる余白で、背景色を指定すると、このパディング領域が塗りつぶされます。
paddingはmarginと同じく、「padding:上 下 左 右;」という順番で書くというルールがあり、それぞれをpxで指定できます。
内側の余白をかけることによって、要素自体の大きさが大きくなっていくので、<div>タグのid名「design」に実際に実際に書いて見てみましょう。




div#design {
width: 460px;
height: auto;
background-color: #fff;
margin: 30px 0 30px 30px;
padding: 20px 20px 20px 20px;
}




一度、保存してブラウザで見てみましょう。
上下左右に20pxの余白ができました。
ですが、横幅が大きくなりすぎてしまいました。
これは、要素の大きさは変わっていないのですが、指定された内側の余白部分も背景色がついたためです。
そういうことも踏まえて、paddingをかけましょう。
次にpaddingの省略した書き方を見てみましょう。




div#event {
width: auto;
height: auto;
background-color: #fff;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
padding: 20px;
}




このように、上下左右すべて同じ数値のときには、省略して書くことができます。
保存してブラウザで見てみましょう。

上下左右に一つずつ値を書いていた時と同じように、省略してもちゃんと表示されました。