div間の空白を削除する

Question

私は2つのdivの間に奇妙な空白があります。

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

空白がどこにあるのかわかりません。左側の要素の両方を浮かべ

Here is a Fiddle

Answer 1

あなたがそこに空白を取得します。インライン要素間の空白は空白として解釈されます。

は、あなたが持っている：用

<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> 

をしかし、これはあなたがやりたいことは悪い方法です。

あなたがしたいことがあれば、要素を浮動させる必要があります。

Answer 2

、また、すべてのスペースを埋めるために40％に30％の幅を作ったが、これは必要ではありません。インラインブロックはIE7ではサポートされていませんが、回避策で修正できます。あなたはdivの中間に空白を持っているので

http://jsfiddle.net/RVAQp/3/

Answer 3

移動し、同じ行の上にこれらの文：右側のdiv要素が左側のdivの終了タグの直後に起動方法

<div id="left_side"> 
    ... 
</div><div id="right_side"> 
    ... 
</div> 

お知らせ：

</div><div id="right_side"> 

Answer 4

これは、トリックを行います。これは、エレメント間のスペースが、現在インラインになっているので、レイアウト自体のスペースになるためです。この動作は、2つのスパン要素でミラー化できます。

Demo。

Answer 5

使用：代わりに "インラインブロック"、何の問題のフロートを使用してみました両方div

Answer 6

で

float:left; 
clear:none; 

。明白な問題

#left_side {float: left;} 

と

#right_side {float: right; margin-right: 10%} 

：にインラインブロック：ちょうど表示を変更しません。間違っている可能性があります。

Answer 7

あなただけのCSSに以下を追加divの間のスペースが唯一の原因あなたが、あなたのコーディングのレイアウトを保持山車を避け、それ自身の上の各div要素を保持する場合は、H1のマージンとパディング

Answer 8

にある

h1 { 
    padding:0; 
    margin:0; 
    } 

ライン全体...

<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>

Answer 9

理由を知っているが、私は削除、関連DIVスタイルの声明とホワイトスペースに（垂直）border: 1px solid red;とfloat: left;（水平方向）を追加することによってこの問題を解決しないでください。