web-dev-qa-db-ja.com

div要素間の「空白」を削除します

これは私のHTMLコードです

<div id="div1">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

私のCSS：

#div1 {
    width:150px;height:100px;white-space:nowrap;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

<!DOCTYPE html>タグの前に<html>を挿入すると、ページは次のようになります。

enter image description here

しかし、<!DOCTYPE html>タグを削除すると、2行の間の「空白」が削除されます enter image description here

しかし、<!DOCTYPE html>タグを使用したいのですが、それをお勧めしますが、その空白を削除できるCSSルールが見つかりません。margin：0; outline：none;を使用しました。など...しかし、それは動作しません、誰もが私を助けます。ありがとう！（英語が苦手...）

csshtmlwhitespacemargin
18
phibao37

これを修正する最もクリーンな方法は、vertical-align: topプロパティのCSSルール：

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

divにコンテンツを追加する場合は、line-height: 0またはfont-size: 0は、テキストレイアウトに問題を引き起こします。

フィドルを参照してください： http://jsfiddle.net/audetwebdesign/eJqaZ/

この問題の原因

この問題は、ブラウザーが「奇抜」モードの場合に発生する可能性があります。この例では、Doctypeを次から変更します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

に

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

ブラウザが余分な空白を処理する方法を変更します。

Quirksモードでは、空白は無視されますが、strictモードでは保持されます。

参照：

html doctypeは空白を追加しますか？

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

32
Marc Audet

line-height: 0px;を親divに追加します

jsfiddle： http://jsfiddle.net/majZt/

11
Simon Staton

あなたはこれを必要とします

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->

*{
    margin:0;
    padding:0;
}

それだけです、それらの空白の問題をすべて削除して楽しんでください。

5
Tauren Mohammed Uddin

つかいます line-height: 0px;

WORKING DEMO

CSSコード：

div{line-height:0;}

これは、すべてのDivに一般的に影響します。既存の親divにスペースのみを持たない場合は、同じものを適用できます。

4
Nitesh

おそらくあなたが追加できる最良の方法ではありませんが：

#div1 {
    ...
    font-size:0;
}
2
Adam Robinson

次のように、div1でline-heightを使用できます。

<div id="div1" style="line-height:0px;">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

これを参照してください： http://jsfiddle.net/wCpU8/

1
Ankit Zalani

[〜＃〜] html [〜＃〜]

<div id="div1">
        <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

[〜＃〜] css [〜＃〜]

#div1 {
    width:150px;height:100px;white-space:nowrap;
    line-height: 0px;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

[〜＃〜] demo [〜＃〜]

0
Leo T Abraham

を使って <br/>新しい行を作成することは、最初から悪い解決策です。コンテナを＃div1にして、3つの子divに等しい幅にします。 <br/>私の意見では、段落以外の場所で使用すべきではありません。

0
Dan Ovidiu Boncut