div間の改行によって空白がレンダリングされます。どのようにHTMLからそれを排除するには？ HTMLで開閉divの（DIV1とDIV2）間の変化ラインがありますので

Question

私はブラウザがその結果改行の代わりに「スペース」文字を追加し、次のようなレイアウト

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div> 
    <div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

を持っています最初のdivの下に表示する2番目のdivを持つ。

div1とdiv2の間にある\ nを削除すると、隣り合って表示され、予想される動作です。

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div><div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

しかし、これによりコードが醜いものになります。私は現在<DOCTYPE html>を使用しています。私はXHTMLへの切り替えも試みましたが、うまくいきませんでした。私は、ラインブレイクやアイデアのこの振る舞いを取り除く何らかの方法があると確信していますか？

FYI：私は浮動小数点数を使用したり、改行を削除するためにレンダリング中にPHPでHTML出力を解析したくありません。

Answer 1

に見

私は実際に良い解決策は、リストプロパティは、それがdiv要素のように見えるようになります「reseting」一般的にリスト

<ul style="width:100px"> 
    <li style="width:50%; display: inline-block;"> 
     div1 
    </li> 
    <li style="width:50%; display: inline-block;"> 
     div2 
    </li> 
</ul> 

でdivを切り替えることだと思います。利点は、ブラウザが<li>アイテムの間にスペースを生成しないことです。

Answer 2

Removing whitespace between HTML elements when using line breaks

上の可能性のある重複あなたはfloat:left CSSスタイルを使用するか、単にタグの間にスペースをコメントすることができ、次のいずれか

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div><!-- 
    --><div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

その後編集：私は、CSSのソリューションはにfont-size:0px;を設定することだと思いますコンテナdiv so：

<div style="width:100px; font-size:0px;"> 
    <div style="width:50%; display: inline-block; font-size:11px;"> 
     div1 
    </div> 
    <div style="width:50%; display: inline-block; font-size:11px;"> 
     div2 
    </div> 
</div> 

この問題を解決する必要があります。 CSS unwanted spacing between anchor-tag elements

Answer 3

"display：inline-block"の代わりに "ディスプレイ：table-cell"を使用して修正する方法があります。

Answer 4

その他の方法（私は時々やること）、マージンを制御し、そのスペースを削除することです：

#mybar span { display: inline-block; } 
#mybar span:not(:first-child) { 
    margin-left: -4px; /* Adjust accordingly */ 
} 

Answer 5

もう一つの可能​​な方法は、ゼロに親のフォントサイズを設定して、フォントを設定することです子要素を必要なものにサイズ変更します。同様に：

#mybar { font-size: 0; } 
#mybar span { font-size: 14px; } 

はしかし、あなたはフォントサイズ= 0は、ブラウザによって異なる表示されていることに注意する必要があります：http://webdesign.about.com/od/fonts/qt/tipfont0.htm

私はFirefoxでテストし、期待通りに動作します。私が正しく覚えていれば、ブラウザによっては最小のフォントサイズも設定できるので、一貫しないかもしれません。