Bootstrap5実装環境でmt-5を足しても余白が変わらない原因 - 静岡県藤枝市のデザインスタジオ・エフ

Bootstrap 5 の実装環境でmt-5を足したのに、「あれ？余白、変わってない？」と首をかしげたことはありませんか？

講座やレビューの場でも、この違和感は本当によく出てきます。コードは正しそうに見えるし、Bootstrapのクラス指定も間違っていない。それでも、思った場所に余白が出ていないように感じる──ここで手が止まる方がとても多いです。

この手の違和感は、実はBootstrapやブラウザの問題ではないことがあります。

実際には、意外と見落とされがちなCSSのmargin仕様と、「とりあえずmt-*を足す」という実装判断が噛み合っていないケースが多いです。

Bootstrapにはmt-*やmb-*といった便利な余白クラスが揃っているため、実装中に余白を足しやすい。一方で、CSSの仕様を前提に考えずに追加すると、効いているのに“反映されていないように見える”状態が起きやすくなります。

この記事では、実務でよく見かける失敗パターンを題材に、「なぜそう感じるのか」「どう考えると迷いにくくなるのか」を、順を追って整理していきます。

前提として押さえておきたいCSSのmargin仕様

まず最初に、ここはしっかり押さえておきたいポイントです。

なぜそう考えるのか：縦方向のmarginは足し算されない

CSSの仕様では、縦に並んだ兄弟要素同士では、上と下のmarginは合算されません。見た目としては、大きいほう（同じならその値）が採用されます。

つまり、

前の要素に margin-bottom
次の要素に margin-top

を両方指定しても、「2倍の余白」にはならない、というのがCSSの基本仕様です。

そうしないと何が起きやすいか

この前提を知らないと、
「追加したのに変わらない」「効いていない気がする」という感覚になります。実務でよく聞く声です。

実は仕様なのに、構築上のエラーだと勘違いしてしまうことがある

このポイントは、

mt-*を足しても見た目が変わらないと、「どこか構築上のエラーがあるのでは？」と考えてしまい、本来は不要な修正を重ねてしまうケースがあります。

たとえば、

回り込み（float）が悪さをしているのではと疑って解除してみる
positionの指定が原因だと思い、relative / absolute を切り替える
親要素に無理に高さやoverflowを指定して押し下げようとする
「とにかく反映させたい」と思ってmt-*を別の要素に付け替える

こうした対応で、たまたま余白が出ることもあります。ただしそれは、CSSの仕様を理解した上での修正ではなく、結果が合っただけの状態です。

今回のようなケースでは、そもそもmt-*が効いていないわけではなく、すでに同じ意味の余白が別の場所で指定されているだけ、ということがあります。

仕様を知らないまま「反映させること」だけを目的に修正を続けると、あとから

なぜこの指定が必要なのか説明できない
別のレイアウトで流用できない
余白を触るのが怖くなる

といった状態に繋がりやすくなります。

だからこそ、見た目が変わらないときほど、構築ミスを疑う前に「これはCSSのmargin仕様として説明がつくか？」を一度確認することが、実務ではとても大切です。

よくある失敗パターン：今回のコードで起きていること

では、講座やレビューで本当によく見る失敗パターンを、そのまま確認してみましょう。

<div class="row mb-5">
  <div class="col">
    <p>ここにレイアウトコンテンツ。</p>
  </div>
  <div class="col">
    <p>ここにレイアウトコンテンツ。</p>
  </div> 
</div>

<div class="mt-5">
  <p>ここに文章。</p>
</div>

一見すると、とても自然です。「rowの下を空けたい」「文章の上も少し空けたい」──その気持ち、よく分かります。

なぜそうなりやすいのか

Bootstrapには便利な余白クラスが揃っているので、前後どちらにも余白を持たせてしまう判断をしやすいのです。

実際に起きていること

.row に mb-5
次のブロックに mt-5

どちらも「同じ境界」を空けるための指定で、意味が重複しています。

「mt-5が効いていない」と感じてしまう理由

なぜそう感じるのか：すでに同じ余白が存在している

mb-5とmt-5が同じ値の場合、画面に現れる余白は1つ分です。そのため、mt-5を足しても見た目に変化が出ません。

受講者・実務者からよく聞く声

「付けたのに変わらない」「指定が効いていない気がする」──ここで不安になるのは、ごく自然です。

ここで起きがちな失敗

この違和感から、mt-4やmt-6に変え始めると、設計ではなく数値合わせの調整に入ってしまいます。

なぜ実務で迷いが増えやすいのか

なぜそう考えるのか：余白の責務が分散している

「ブロック間の余白」という1つの意味が、前後2つの要素に分かれています。

そのまま進むと起きやすいこと

後から別の要素が挟まると余白が崩れる
どのクラスを消していいか判断できない
ページごとに余白のルールがバラつく

WordPress環境では、ブロックやテンプレートが差し替わるため、この問題が特に表に出やすくなります。

判断の整理と実装の落としどころ

mt-5が「効かない」のではなく、CSSの仕様どおりに動いている

今回のケースで起きているのは、Bootstrapの不具合や、最近のブラウザ特有の挙動ではないことがあります。多くの場合、CSSのmargin仕様どおりに描画された結果を、人間側が「効いていない」「反映されていない」と感じているだけのケースでした。

縦方向に並ぶ要素では、上と下のmarginが単純に足し算されるわけではありません。そのため、mb-5とmt-5を両方指定しても、見た目としては1つ分の余白に見えることがあります。これはBootstrapのルールではなく、CSSそのものの仕様です。

Bootstrapのmarginユーティリティは、このCSS仕様の上に「使いやすいクラス名」を載せているだけなので、仕様を意識せずにmt-*を足していくと、「追加したのに変わらない」「どこが効いているのか分からない」という違和感が生まれやすくなります。

実務では、marginが効くかどうかよりも、どのブロックが余白の責務を持つかを決めることのほうが重要です。今回のようにレイアウトの区切りを表したいなら、前のブロックにmb-*を寄せる。文章ブロック自体のルールなら、mt-*を持たせる。この判断ができるようになると、余白調整で迷う時間は大きく減ります。

「mt-5が効かない」と感じたときは、まずBootstrapやブラウザを疑う前に、CSSのmargin仕様と、余白の責務がどこにあるかを一度立ち止まって確認してみてください。それだけで、修正の方向性がかなり見えやすくなります。