見出し画像

【CSS】liに上下のmarginを設定した場合、範囲が重複するのが普通なの？🤔

ごろじ

CSSで`<li>`要素（リストアイテム）に上下の`margin`（余白）を設定した場合、隣接するリストアイテム間の`margin`が重複することはよくあります。これは「マージンの重複」または「マージンの衝突」と呼ばれる現象です。

具体的には、もし2つの`<li>`要素が上下に配置されており、それぞれに上下の`margin`が設定されている場合、その`margin`の値は合算されずに、より大きい方の`margin`値が隣接する要素間の実際の間隔として採用されます。これは、ブロックレベル要素（例えば、`<div>`、`<p>`、`<li>`など）でよく見られる振る舞いです。

例えば、次のようなCSSがあるとします：

li {
  margin-top: 10px;
  margin-bottom: 15px;
}

この設定では、各`<li>`要素の上には10ピクセル、下には15ピクセルの`margin`が設定されています。しかし、2つの`<li>`要素が縦に並んでいる場合、上の`<li>`の`margin-bottom`と下の`<li>`の`margin-top`が重複する箇所では、10ピクセルと15ピクセルのうち大きい方の15ピクセルが隣接する要素間の実際の間隔として適用されます。この結果、リストアイテム間の間隔は互いに15ピクセルとなります。

この振る舞いは、隣接するブロックレベル要素間で余白を効率的に管理するのに役立ちますが、特定のレイアウトを達成しようとする際には予期せぬ挙動となることもあります。このような場合は、`padding`を使用するか、`margin`の重複を避けるための他のCSSテクニック（例えば、隣接するセレクタを使って特定の要素にのみ`margin`を適用するなど）を考慮する必要があります。

（そうだったのか！！　こういう細かいとこ？を知っていきたいですよね！！😀　なんか、すげえ知ってるほうが面白い感じがするし！😁）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！