Embedded Files
余白の指定(margin & padding)
余白の指定(margin & padding)
余白で画面レイアウトを整えます。
マージンとパディングで領域を指定できますが少し違いがあります。
外側余白(margin)
margin: 30px 50px 10px 20px
もしくは
margin-top:, margin-bottom:,
margin-left:, margin-right:
値：pxやptなどの単位付きの数値や%
例
ｾﾚｸﾀ {
margin-top: 30px; /* 上の余白 */
margin-bottom: 10px; /* 下の余白 */
margin-left: 20px; /* 左の余白 */
margin-right: 50px; /* 右の余白 */
}
top,bottom,left,rightを入れずに
margin のみで指定したときは、
スペースで区切って４方向の値を指定。
指定する値の数
１つの場合：上下左右
２つの場合：上下 / 左右
３つの場合：上 / 左右 / 下
４つの場合：上 / 右 / 下 / 左
のように設定されます。
見本
見本
見本の青枠線左外側に20px分の余白
が入った状態
見本の文字の入った見出し（h1）が
右にずれてます。→
alignのrightでずらしたのでなく
左側に余白を取ることで
ずらしています。
実際にホームページを作成すると
いろんなカテゴリーを配置していく
ことになります。
そのカテゴリーの配置を調整するのに、
余白(margin)を使っていきます。
<head>
<style type="text/css">
h1 {
border-style: solid; /* 枠の形 */
border-width: 4px; /* 枠線の太さ */
border-color: #5500ff; /* 枠線の色 */
margin-left: 20px; /* 枠の内側左余白 */
background-color: pink ; /* 背景色 */
}
</style>
</head>
<body>
<h1>見本</h1>
見本の青枠線外側左20px分の余白
が入った状態
</body>
内側余白(padding)
padding: 10px 20px 30px 40px
もしくは
padding-top:, padding-bottom:,
padding-left:, padding-right:
値：pxやptなどの単位付きの数値や%
例
ｾﾚｸﾀ{
padding-top: 10px; /* 上の空白 */
padding-bottom: 30px; /* 下の空白 */
padding-left: 40px; /* 左の空白 */
padding-right: 20px; /* 右の空白 */
}
top,bottom,left,rightを入れずに
padding のみで指定したときは、
スペースで区切って４方向の値を指定。
指定する値の数
１つの場合：上下左右
２つの場合：上下 / 左右
３つの場合：上 / 左右 / 下
４つの場合：上 / 右 / 下 / 左
のように設定されます。
見本
見本
見本の文字上50px＆左20px分の余白
が入った状態
見本の文字の位置を、
見出し（h1）の中で
余白によって動かしてます。
→
余白分、見出しの領域も
広くなってます。
（上のmarginの例と比べてね）
わかりやすいように背景に色
付けてありますが、
ｐやｈって文字をいれてる四角い
箱なんですねー。
この概念はすごく大切！！
ちなみに、paddingで内側に
余白を作って動かせるのは
文字だけじゃありません。
<div><table><img src>など
箱の中身は全部動かせます。
<head>
<style type="text/css">
h1 {
border-style: solid; /* 枠の形 */
border-width: 4px; /* 枠線の太さ */
border-color: #5500ff; /* 枠線の色 */
padding-top: 50px; /* 枠の内側上余白 */
padding-left: 20px; /* 枠の内側左余白 */
background-color: pink ; /* 背景色 */
}
</style>
</head>
<body>
<h1>見本</h1>
見本の文字上50px＆左20px分の余白
が入った状態
</body>
マージンとパディングについて
テキストのみのレイアウト（背景がない場合）だと、マージンで余白をとっても
パディングで余白をとっても見た目は変わらない。
（上の画像だと、黄色い背景がなくなれば「見本」の文字は同じ位置にある）
こういう場合、マージンで余白の指定をしたほうがよい。
パディングをあちこちで設定すると、レアウトが崩れたときどこがおかしいか
混乱して難しくなります。
Page updated
Google Sites
Report abuse