【WEB 入門講座】marginとpaddingでタグに余白を設定する
[WEB 入門講座]marginとpaddingでタグに余白を設定する
pタグにmargin（余白）とpadding（内側の余白）を 設定する方法を学習する。 Webサイト政策において、marginとpaddingは頻出のプロパティと言える。 学習内容は重要だが学習する分量は多くないので、 ラジオを聴きながらのんびり学習してほしい。
margin（余白）の設定
pタグの周りに余白を設定する方法を学習する。 まずsample.htmlを見る。
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007
008 <p>走るIORI</p>
009 <p>歩くIORI</p>
010
011</body>
012</html>
002<head><meta charset="UTF-8">
003<title>IORI</title>
004<link rel="stylesheet" href="style.css">
005</head>
006<body>
007
008 <p>走るIORI</p>
009 <p>歩くIORI</p>
010
011</body>
012</html>
本講座で変更せず継続して利用するsample.htmlである。 まず4行目で、CSSを設定する。 linkタグのhref属性に「style.css」を設定する。 つまり、「style.css」ファイルをHTMLに適用する。 8行目と9行目でpタグを表示する。 こんかい2つのpタグを利用して、margin（余白）を学習する。 では、style.cssを確認する。
pタグの背景色を「#ff5」に設定し、 marginプロパティを「0em」にする。
margin タグの周りに余白を設定する。
タグの周りに余白を設定する場合、marginプロパティを利用する。 こんかい、marginプロパティの値を「0」に設定した。 画面を確認する。
走るIORI
歩くIORI
2つのpタグは黄色の背景色を持つ。 余白を「0」に設定すると、2つのpタグが接する。 つまり、2つのpタグの間に余白は無い。 ここで、2つのpタグの周りに余白（margin）を設定する。
marginプロパティの値を「1em」に設定した。
走るIORI
歩くIORI
2つのpタグの周りに余白が生まれる。 marginを利用すると、タグの周りに余白を作る事ができる。 解説は以上である。
padding（内側の余白）を設定する
走るIORI
歩くIORI
pタグの背景色は黄色である。 文字列「走るIORI」と「歩くIORI」に、少々窮屈感を感じる。 黄色のpタグの内側に余白を設定する。
paddingプロパティの値を「1em」に設定した。
走るIORI
歩くIORI
pタグの内側に余白が生まれ、窮屈感がなくなった。
padding タグの内側に余白を作る
pタグの内側に余白を作る場合（pタグの端と文字列の間に余白を作る場合）、 paddingプロパティを利用する。
走るIORI
歩くIORI
paddingの値を「1em」から「2em」へ変更すると、内側の余白が大きくなる。 解説は以上である。
左右上下のmarginとpaddingを設定する
左右上下に個別の余白を設定する方法を学習する。
001/* pタグを設定 */
002p {
003 background : #ff5 ;
006 margin-left : 5em ;
007 margin-right : 5em ;
008 padding : 1em ;
009}
002p {
003 background : #ff5 ;
006 margin-left : 5em ;
007 margin-right : 5em ;
008 padding : 1em ;
009}
走るIORI
歩くIORI
黄色のpタグの左右に余白が設定される。 「margin-left:5em」と「margin-right:5em」が反映した画面である。
| プロパティ | 解説 |
| margin-top | 上の余白を設定 |
| margin-bottom | 下の余白を設定 |
| margin-left | 左の余白を設定 |
| margin-right | 右の余白を設定 |
このように上下左右の余白を設定する。 こんかい、CSSで 「margin-left:5em」「margin-right:5em」と設定したので、 左右に5em分（標準文字サイズの5倍）の余白が生まれる。
つぎに、paddingの設定を見る。
走るIORI
歩くIORI
CSSで「padding: 2em 0em 0em 5em;」と記述する。 これは、内側の余白の左右上下を設定する記述である。
paddingの左右上下の設定 padding : 上 右 下 左 ;
左右上下の余白をまとめて設定する場合、 paddingの値に4つ数字を記述する。 4つ数字を記述すると、 左から「上、右、下、左」の余白になる。 こんかい、「padding: 2em 0em 0em 5em;」と記述した。
| 余白 | 値 |
| 上の余白 | 2em |
| 右の余白 | 0em |
| 下の余白 | 0em |
| 左の余白 | 5em |
このような設定になる。 「時計回りでpaddingを設定する」と覚えると良い。 4つの数字を並べて余白を設定する方法は、 marginでも利用できる。
001/* pタグを設定 */
002p {
003 background : #ff5 ;
004 margin : 1em 5em 1em 5em ;
005 padding : 1em ;
006}
002p {
003 background : #ff5 ;
004 margin : 1em 5em 1em 5em ;
005 padding : 1em ;
006}
走るIORI
歩くIORI
| 余白 | 値 |
| 上の余白 | 1em |
| 右の余白 | 5em |
| 下の余白 | 1em |
| 左の余白 | 5em |
marginプロパティも、4つの数字を並べて余白を設定できる。 もう少し便利な記述方法もあるが、各自で調べてほしい。 解説は以上である。
まとめ
margin タグの周りに余白を設定する。
padding タグの内側に余白を作る
paddingの左右上下の設定 padding : 上 右 下 左 ;
marginの左右上下の設定 margin : 上 右 下 左 ;
