■概要
marginとpadding属性は、外側と内側の余白を意味します。(borderを境界として分かれます)
width, height属性と同じく数字の後に単位を書きます。
■方向
各方向に異なる余白の設定ができます。
margin: 20px と書くと上下左右全て20pxを意味します。
margin: 30px 10px は、上下30px, 左右10pxを意味します。
margin: 30px 10px 20px 50px は、上30px, 右10px, 下20px, 左50pxを意味します。
margin: 30px 10px 40px は、上30px, 左右10px, 下40pxを意味します。
※上から時計回りで 上 右 下 左 の順で設定します。
■使用方法
#box{ margin: 10px; padding: 20px }
■例
<html>
<head>
<style>
.box-container { display: inline-block; background-color: #d2f4ff; border: 2px solid #09c; margin: 5px 15px; }
.box-container div { width: 150px; height: 80px; background-color: #fde6ff; border: 2px solid #90C; font-size: 15px; }
#box1 { margin: 10px; padding: 0; }
#box2 { margin: 5px 25px; padding: 0; }
#box3 { margin: 0; padding: 10px 30px 5px; }
#box4 { margin: 10px; padding: 10px 20px; }
#box5 { margin: 10px 30px 0 50px; padding: 30px 0 }
</style>
</head>
<body>
<div class=”box-container”>
<div id=”box1″>m: 10<br>p: 0</div>
</div>
<div class=”box-container”>
<div id=”box2″>m: 5 25<br>p: 0</div>
</div>
<div class=”box-container”>
<div id=”box3″>m: 0<br>p: 10 30 5</div>
</div>
<div class=”box-container”>
<div id=”box4″>m: 10<br>p: 10 20</div>
</div>
<div class=”box-container”>
<div id=”box5″>m: 10 30 0 50<br>p: 30 0</div>
</div>
</body>
</html>
出力結果
m: 10
p: 0m: 5 25
p: 0m: 0
p: 10 30 5m: 10
p: 10 20m: 10 30 0 50
p: 30 0
