ボックスモデル -- ボーダー

要素と他の要素の間の距離はマージンを使用して設定できます。境界は、上、右、下、左に分割することもできます。次のコード:

div{margin:20px 10px 15px 30px;}

は個別に記述することもできます:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

上下左右の境界線が両方とも 10px の場合は、次のように記述できます:

div{ margin:10px;}

上下の境界線が同じ場合10px、左右の境界線が同じ 20px の場合は、次のように書くことができます:

div{ margin:10px 20px;}

要約すると、パディングとマージンの違いは、パディングは境界線の内側にあり、マージンは境界線の外側にあります。

りー

学び続ける

新しいファイル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
 width:300px;
 height:300px;
 border:1px solid red; 
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
 <div id="box1">box1</div>
 <div id="box2">box2</div> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX