cssでborderを外すとレイアウトがずれる。

Question

前提・実現したいこと

cssでborderを外すとレイアウトがずれてしまいます。
borderの太さ以上に大きくずれるため、自分では解決できず質問しました。
単純なボックスモデルの問題ではないような気がしています。
borderの有無が本質的な問題ではないかもしれません。

なぜレイアウトのずれが発生しているのか、
コードをどのように変更すれば解決するか教えていただければ幸いです。

発生している問題・エラーメッセージ

レイアウトがずれる。
エラーメッセージはなし。

① #q-wrappern (問題なし)

② .q (borderあり)

③ .q-container (borderあり)

④ .q (borderなし)

⑤ .q-container (borderなし)

borderを外した状態で、②③のようなレイアウトになるのが理想です。

該当のソースコード

<div id="q-wrapper">
  <div class="q" id="q1">
    <div class="q-container">
      <h2>Q1. 質問</h2>
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
      <span class="fas fa-chevron-down scroll"></span>
    </div>
  </div>
</div>

#q-wrapper {
  position: absolute;
  top: 100vh;
  width: 80vw;
  height: 1000vh;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  margin: 5vh 10vw 10vh 10vw;
}

.q {
  position: relative;
  top: 0;
  width: 80vw;
  height: 100vh;
  /* border: solid;  <===  問題のborder */
}

#q1 {
  height: 95vh;
}

.q-container {
  position: relative;
  width: 70vw;
  height: 90vh;
  /* border: solid red;  <===  問題のborder */
  margin: 5vh 5vw;
}

#q1 .q-container {
  height: 95vh;
}

.q-container h2 {
  font-size: 2rem;
  text-align: left;
}

.q-container h2::after {
  content: '';
  display: block;
  width: 70vw;
  height: 2px;
  background: linear-gradient(to right, #bf7fff, #ff7fbf, #ffbf7f);
  -webkit-background-clip: block;
  -webkit-block-fill-color: transparent;

}

.q-container ul {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: absolute;
  top: 0;
  width: 70vw;
  height: 90vh;
  justify-content: space-evenly;
  -ms-align-items: center;
  align-items: center;
  font-size: 1.2rem;
}

試したこと

borderを使用して、レイアウトがずれていることを確認しました。
必ずしもborderが原因になっている訳ではないと考えています。

解決策を探したところ、borderの幅の分、レイアウトがずれる現象はありましたが、
このように大きくずれる現象は見つけられませんでした。

補足情報（FW/ツールのバージョンなど）

atomでコードを書いています。
ブラウザはChromeです。
PCはSurface Proを使用しています。

Answer 1

下記の現象ですね。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

上記の下記の項目に該当します。

親要素と先頭・末尾の子要素
ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。相殺されたマージンは最終的に、親要素の外側に出ます。

解決法としては、相殺を考慮したmarginを設定するか、
「ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合」とあるので、例えば padding: 1px; を追加すれば相殺は発生しないですね。

Comments

[Winnie207]

marginが0でも相殺が起きるとは知らなかったです。
大変参考になりました。ありがとうございます！