【HTML/CSS】inline-blockを使用した要素間に隙間ができたときの対処法

Last updated at 2024-05-08Posted at 2024-05-06

エンジニア初心者の投稿であるため、間違っている箇所が多くあるかと思います。
何かお気づきの点がありましたらご教授いただけると幸いです。

やりたいこと

下の図のように要素（白のボックス）を横一列で並べたい。

HTML

<div>
    <p class="inline"></p>
    <p class="inline"></p>
</div>

CSS

//文字や背景のスタイルの記載は省いている
//実際には親要素に幅を指定している

.inline {
  display: inline-block;
  margin-left: 60px;
}

.inline:first-child {
  margin-left: 0;
}

以上のコードで実行した結果がしたの図である。
横一列で並べたいのになぜか縦に、そして少しずれている。

以下の記事によるとinline-boxを使用した場合に余白ができてしまうことがあるそうだ。この余白はソースコードを書く際に改行をすることが原因で、コンピュータが改行を認識して自動で余白を作成してしまうとのこと（パソコンすごい…）。

inline-boxが含まれている親要素に対して、font-size:0を設定することによって余白を削ってくれる。

HTML

<div class="gray__box">
    <p class="inline"></p>
    <p class="inline"></p>
</div>

CSS

.inline {
  display: inline-block;
  margin-left: 60px;
}

.inline:first-child {
  margin-left: 0;
}

//新しく追加したクラスとプロパティ
.gray__box {
font-size: 0;
}

実際にこれで解決した。

コンピュータの自動補完機能には助けられることが多いけど、勝手に変換されると困ることがある。そのときの対処法を知っておくことが大切であり、うまくコンピュータと付き合っていくコツなのかなと考えさせられる問題だった。