Works by

Ren's blog

@rennnosuke_rk 技術ブログです

トップ > 【HTML】マージンの相殺

【HTML】マージンの相殺

上下で隣り合うマージンは重なり合う

HTMLタグに設定するマージンは、隣り合う上下のマージンは重なり合い相殺されるという特徴を持ちます。

例えば以下の2つのようなタグが上下に並んでいるとします。

f:id:rennnosukesann:20180421223642p:plain

f:id:rennnosukesann:20180421223651p:plain

上のタグの下マージンは30px、下のタグの上マージンは20pxとなっています。

このとき、各タグ間のマージンサイズはどのようになるのでしょうか？

直感的には、各タグのマージンサイズの合計で30+20=50pxとなりそうです。しかし実際には、タグ間のマージンはより大きいマージンサイズである30pxに合わせられます。これは各々のマージンが重なった状態になるためです。

f:id:rennnosukesann:20180421224017p:plain

入れ子構造でも同様の現象が発生します。
ただし、横マージンに関しては重なり合いが発生しません。

Sample

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>title</title>
  <link rel="stylesheet" href="../common/css/sample.css" />
</head>
<body>
  <div id="bg_tag1">margin:30px</div>
  <div id="bg_tag2">margin:20px</div>
  <div id="tag_container">
    <div id="tag1">タグ1</div>
    <div id="tag2">タグ2</div>
  </div>
</body>
</html>
CSS
body {
  color: #666666;
}

#tag_container {
  width: 100%;
  position: absolute;
}

#tag1 {
  width:200px;
  height: 30px;
  text-align: center;
  margin: 30px;
  border: solid 1px #888888;
  background-color: #ffccdd;
}

#tag2 {
  width:200px;
  height: 30px;
  text-align: center;
  margin: 20px;
  border: solid 1px #888888;
  background-color: #ffccdd;
  margin-left: 30px;
}

#bg_tag1 {
  width:260px;
  height:90px;
  position: absolute;
  text-align: center;
  background-color: #ccddff55;
  border: dashed 1px #333333;
}

#bg_tag2 {
  width: 240px;
  height:70px;
  position: absolute;
  text-align: center;
  background-color: #ffccdd55;
  border: dashed 1px #333333;
  margin-top: 70px;
  margin-left: 10px;
}