8

と でいくつかのテストを行っていますfloatがinline-block、それらの間に違いがあることに気付きました。

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;
}
4

4 に答える 4

11

float と inline-block でいくつかのテストを行っていますが、それらの間に違いがあることに気付きました。

それらが同じではないかもしれないという意味を与えたリソースが何であれ、それは誤解を招くものです. それらはまったく別のものです。

div の間には少し余裕があります

それは ではありませんmargin。divこれは、HTML 内の s間の改行に起因するスペースです。1 つの解決策は、改行を削除することです。別の解決策はfont-size: 0、それを含む要素に設定することです (したがって、スペースがレンダリングされません)。

font-size2 番目のメソッドを使用する場合は、内側の s に別のメソッドを設定する必要があることに注意してください。divそうしないと、それらの内部のテキストがレンダリングされません。

それが役立つことを願っています!

于 2012-11-26T09:03:32.063 に答える
7

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

于 2012-11-26T09:03:54.800 に答える
2

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

次に、次のようfont-sizeに、子の をfont-size: 12px(または設計で指定されたサイズに) 設定します。

#wrap{
    font-size:0;
}
.square{
    font-size:12px;
}
于 2012-11-26T09:03:42.723 に答える
0

私が理解しているように、インライン ブロック要素は、他のインライン オブジェクトに固有の同じ自動疑似マージン間隔で表示されます。一方、浮動要素は、ドキュメントのオブジェクト フローに関して完全に独立したものとして扱われます (したがって、煩わしいギャップはありません)。

申し訳ありませんが、詳細な回答はできませんが、これは間違いなく私が以前に取り組んだことです。価値があるのは、インラインブロック要素にとってスペーシングは確実に迷惑になるはずです。次の行にプッシュされることなく、親要素内に含まれるすべてのものを試している場合は、これらの疑似マージンを補正することを覚えておく必要があります.

于 2012-11-26T09:15:42.550 に答える