1. ホーム
  2. css

[解決済み】div間の空白を削除する

2022-02-08 10:59:32

質問

2つのdivの間に変な空白ができるんだけど。

それぞれのdivは、cssプロパティ display: inline-block で、それぞれに高さと幅が設定されています。

空白がどこにあるのかがわからない。

フィドルはこちら

解決方法は?

divの間に空白があるため、そこに空白が生じます。インライン要素間の空白は、スペースとして解釈されます。

あるんですね。

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

のために変更します。

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

しかし、これはやりたいことをやるには悪い方法です。

そうしたいのであれば、要素をフロートさせるべきでしょう。