web-dev-qa-db-ja.com

div間の改行はスペースをレンダリングします。 HTMLからそれを排除する方法は？

私は次のレイアウトを持っています

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

hTMLでは、div（div1とdiv2）を閉じると開くの間に変更行があるため、ブラウザーは改行の代わりに「スペース」文字を追加します。これにより、最初の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に切り替えてみましたが、うまくいきませんでした。この改行の動作を排除する方法があると確信しています、何かアイデアはありますか？

参考：floatを使用したり、レンダリング中にphpでhtml出力を解析して改行を削除したりしたくありません。

htmltagsline-breaks
14
ptheofan

私は実際に良い解決策はリストでdivを切り替えることだけだと思います

<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>アイテム間にスペースを生成しないことです。

1
ptheofan

もう1つの可能な方法は、親のフォントサイズをゼロに設定してから、子要素のフォントサイズを必要な値に設定することです。お気に入り：

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

ただし、font-size = 0はブラウザによって表示が異なることに注意する必要があります： http://webdesign.about.com/od/fonts/qt/tipfont0.htm

Firefoxでテストし、期待どおりに動作します。記憶が正しければ、ブラウザによっては最小フォントサイズも設定できるので、一貫性がない場合があります。

7
lepe

重複の可能性 改行を使用するときにHTML要素間の空白を削除

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に設定することだと思います。

<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不要な間隔

2
Matei Mihai

これを修正する1つの方法は、「display：inline-block」の代わりに「display：table-cell "」を使用することです。

1
lepe