cssインラインブロック対フロート

私はfloatとinline-blockでいくつかのテストをしていますが、私はそこに違いがあることに気付きました。cssインラインブロック対フロート

THIS EXAMPLEからわかるように、display:inline-blockを使用すると、divの間に少しのマージンがありますが、float:leftを使用すると、期待通りに機能します。

私はEric MeyerのReset CSS v2.0を使用しています。

私は何か間違っているか、これがinline-blockの振る舞いです（この場合、それはあまり信頼性がありません）。

HTML（リセットなし）

<!DOCTYPE html> 
<html> 
<head> 
    <title>How padding/margin affect floats</title> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="wrap"> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
    </div> 
</body> 
</html>

CSS

#wrap{ 
    width: 600px; 
    margin:auto; 
} 

.square{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin-bottom: 10px; 
    /*display: inline-block;*/ 
    float:left; 
}

出典

2012-11-26 Tomer

親要素にfont-size: 0;を指定します。

次に、このように、font-size: 12px（またはあなたのデザインが決まりどんなサイズ）に子供のfont-sizeを設定します。

#wrap{ 
    font-size:0; 
} 
.square{ 
    font-size:12px; 
}

出典

2012-11-26 09:03:42

私はfloatとインラインブロックの上にいくつかのテストをやっていると私はがあるそこに気づきましたそれらの違い。彼らはは同じではないかもしれないことを暗示が誤解を招くおそれがあり、あなたを与えたものは何でもリソース

。彼らはcompletely different thingsです。

のdivはmarginではありません

それらの間に少し余裕を持っています。これは、HTML内の divの間の改行によって生じるスペースです。 1つの解決策は、改行を削除することだけです。もう1つは、包含する要素に font-size: 0を設定することです（したがって、空白が表示されないようにします）。

2番目の方法を使用する場合は、font-sizeを内側のdivに設定する必要があります。そうしないと、内部のテキストはレンダリングされません。

希望に役立ちます！

出典

2012-11-26 09:03:32 Chris

ありがとうございました。改行がスペースとして扱われていることはわかりませんでした。 – Tomer

@ ftom2はい、それは常にHTMLの場合です。同様に、タブはスペースとしてレンダリングされます。 – Chris

それが原因のスペースです。コンテナ要素にfont-size: 0を設定すると、ギャップがなくなります（インラインブロックのfont-sizeを確実にリセットしてください）。

出典

2012-11-26 09:03:54 Henrik

私が理解しているように、インラインブロック要素は、他のインラインオブジェクトと同じ自動擬似マージン間隔で表示されます。フローティング要素は、ドキュメントのオブジェクトフローに関して完全に独立して扱われます（したがって、迷惑なギャップはありません）。

申し訳ありませんもっと詳細な回答はできませんが、これは以前私が苦労してきたものです。それが価値があるのであれば、スペーシングはとなるはずです。はインラインブロック要素に対して厄介なものです。擬似マージン親要素に含まれているものすべてに次の行

出典

2012-11-26 09:15:42 monners

cssインラインブロック対フロート

答えて

関連する問題