レイアウトでは必須！CSSのpadding、marginの使い方
今回はCSSのプロパティである「padding」と「margin」の使い方を紹介したいと思います。
どちらもHTML要素に余白をつけるプロパティになります。
paddingは要素の内側につく余白です。
marginは要素の外側につく余白です。
デザインの原則として「近接」という概念があります。
関係のあるものは近づけ、関係のないものは離しましょうという考え方です。
そうすることで、この情報がどこにかかっているものかがわかりやすくなります。
そうした見せ方をするのに上記のプロパティは必要になります。
paddingもmarginもWeb制作ではよく使われるので是非使い方を覚えてください。
また、もしデザインについて学びたい方は以下の「ノンデザイナーズ・デザインブック」が参考になるかと思うのでよかったら読んでみてください。「近接」についても解説されています。
paddingの使い方
paddingはHTML要素の中身に対して余白を空けるプロパティです。
以下のサンプルをご覧ください。
HTML
<html>
<head>
<style>
.box1 {
width: 200px;
background: lightblue;
}
.box2 {
width: 200px;
background: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">
ああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
<div class="box2">
ああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
</body>
</html>
paddingを設定していないdivタグ(box1)と設定したdivタグ(box2)を用意しました。
上の青いボックスに比べて下の赤いボックスの中身には余白が設けられています。
これがpaddingの効果です。
赤いボックスには10pxのpaddingを設定しているので上下左右に10px分の余白があります。
また、上記は一律10pxで余白を取りましたが、それぞれ個別の幅に設定することもできます。
以下にいろいろな書き方のサンプルを列挙します。
- padding-top: 1px…上に1pxの余白
- padding-bottom: 2px…下に2pxの余白
- padding-left: 3px…左に3pxの余白
- padding-right: 4px…右に4pxの余白
- padding: 5px 6px 7px 8px…上に5px、右に6px、下に7px、左に8pxの余白
- padding: 9px 10px 11px…上に9px、左右に10px、下に11pxの余白
- padding: 12px 13px…上下に12px、左右に13pxの余白
なんか幅が広がってない？
ところでですが、どちらのボックスも「width: 100px;」によって横幅を100pxにしているのですが、paddingが設定されたほうはなんだか余白の分だけ横幅も広がっているように見えますね。
実はwidthプロパティで設定される横幅には線の幅やpaddingによって生まれた余白の分は含まれていません。
なので下のボックスの横幅は100px+右の余白10px+左の余白10pxで120pxの横幅になっています。
これがCSSの仕様なので仕方がないのですが、多くの人はこういう動きになるとは思わないのではないでしょうか。（僕はちょっと残念だなと思っています。）
解決法はあります。
CSSに「box-sizing: border-box;」を追加してください。
CSS
.box2 {
width: 200px;
background: lightcoral;
padding: 10px;
box-sizing: border-box;←ここ追加
}
すると横幅がピッタリ合いましたね！
box-sizingというプロパティはwidthやheightプロパティで指定された幅、高さに線の幅や余白分を含めるかどうかを設定するものです。
初期値はcontent-boxになっていて上述のとおり、線や余白を含めないことになっています。
ここをborder-boxにすると線や余白も含めたサイズで表示してくれます。
marginの使い方
paddingは要素の中身に対して余白をつけるものでしたが、marginは要素の外側につけるものになります。使い方はpaddingと同じです。
以下はサンプルコードです。
HTML
<html>
<head>
<style>
.box1 {
width: 200px;
background: lightblue;
}
.box2 {
width: 200px;
background: lightcoral;
margin: 50px;
}
</style>
</head>
<body>
<div class="box1">
ああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
<div class="box2">
ああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
</body>
</html>
下の赤いボックスに「margin: 50px;」を設定しました。
そうすることで赤いボックスの周りに余白ができました。（わかりやすいように赤い線で囲っています。）
padding同様にそれぞれの方向に別の余白幅を設定することができます。
- margin-top: 1px…上に1pxの余白
- margin-bottom: 2px…下に2pxの余白
- margin-left: 3px…左に3pxの余白
- margin-right: 4px…右に4pxの余白
- margin: 5px 6px 7px 8px…上に5px、右に6px、下に7px、左に8pxの余白
- margin: 9px 10px 11px…上に9px、左右に10px、下に11pxの余白
- margin: 12px 13px…上下に12px、左右に13pxの余白
まとめ
paddingとmarginの使い方を解説しました。
どちらも余白を空けるプロパティで使い方も同じなのでセットで覚えましょう。
したっけ！
- paddingは要素の内側に余白をつける
- marginは要素の外側に余白をつける
- どちらもそれぞれの方向に個別の幅を設定できる
- paddingで要素のサイズがうまく合わない時はbox-sizingを使ってみて！
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy