今回は、テキスト要素に対して余白をつける方法について解説したいと思います。
テキストに余白をつける方法
テキストに余白をつける方法として、
marginとpaddingでつける方法があります。
まずは、以下の画像をご覧ください。
See the Pen wvGxBbE by ryu (@ryu-no-sss) on CodePen.
まずは、paddingについての解説をしていきます。
borderの内側に余白を作るpadding
見出しのとおり、paddingは、borderの内側に対して余白を作ります。
borderとは、テキストを黒い線で囲んでいる要素です。
paddingの値の付け方[表]
| padding: 10px; | 上下左右の全てに10pxの余白を作ります。 |
| padding: 10px 10px; | 1つ目の値：上下、2つ目の値：左右 に余白を作ります。 |
| padding: 10px 10px 10px; | 1つ目の値：上、2つ目の値：左右、3つ目の値：下 に余白を作ります。 |
| padding: 10px 10px 10px 10px; | 1つ目の値：上、2つ目の値：右、3つ目の値：下、4つ目の値：左 に余白を作ります。 |
また、px以外にも%、emも使用することが出来ます。
borderの外側に余白を作るmargin
続いては、marginについての解説です。
以下の画像のように、borderの外の赤丸の箇所がmarginになります。
ここのborderは、赤線になっています。
marginの値の付け方[表]
marginの値の付け方は、paddingと同様の付け方になります。
| margin: 10px; | 上下左右の全てに10pxの余白を作ります。 |
| margin: 10px 10px; | 1つ目の値：上下、2つ目の値：左右 に余白を作ります。 |
| margin: 10px 10px 10px; | 1つ目の値：上、2つ目の値：左右、3つ目の値：下 に余白を作ります。 |
| margin: 10px 10px 10px 10px; | 1つ目の値：上、2つ目の値：右、3つ目の値：下、4つ目の値：左 に余白を作ります。 |
こちらも、px以外にも%、emも使用することが出来ます。
autoに関して
ブロック要素を中央揃えにする方法として、
margin: 0 auto;のように、
左右に対して、autoを使うことで、画面の横幅が変わっても、
画面の中央にブロック要素が配置されるように、
自動で、marginを設定してくれます。
また、margin-left: auto;と設定した場合は、
ブロック要素の左側に、画面幅いっぱいの余白を左側に作ります。
言葉だけでは伝わらないと思うので、デモと画像をご覧ください。
See the Pen RwaBPqq by ryu (@ryu-no-sss) on CodePen.
まとめ
・paddingは、borderの内側に対して余白を作る。
・marginは、borderの外側に対して余白を作る。
今回は、テキストに余白をつける方法について解説をさせていただきました。
このpadding/border/marginの関係は、最初つまずきやすいと思うので、
何度も振り返りをして、慣れましょう！
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
