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

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

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;}

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

りー


学び続ける
||
<!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>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜