4

次の HTML コードがあります。

<section class="container">
    <div class="search"></div>
</section>

そして、これらの CSS ルール:

*, *:before, *:after {
    box-sizing: border-box;
}

body, section, div {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

.container {
    display: inline-block;
    position: relative;
}

.search {
    display: inline-block;
    padding: 3em;
    border: 1px solid black;
}

要素を調べるsectionと、サイズが 5px であることがわかります...サイズを設定していません。ブラウザはこれを子のサイズで自動的に計算します。

なぜこの動作ですか？

4

2 に答える 2

4

その理由は、 and要素inline-blockに を使用しているためです。アイデアは、要素を段落内のテキストとして扱うことです。つまり。したがって、要素自体は要素ですが、タグにスペースを追加すると単語間にスペースが挿入されるように、2 つの要素間に空白を追加すると要素間にスペースが挿入されるのと同じように、ブラウザは要素間にスペースを追加します。containersearchinline-blockinlineblockHTML.pinline-block

そうは言っても、これを修正するにはいくつかの方法があります。

  1. HTML を最小化します。おそらく最も簡単な方法です。コードに空白を入れる代わりに、次のようにすべてを 1 行にまとめてください: <section class="container"><div class="search"></div></section>. (警告: これはテストされていません。)
  2. 負のマージンを追加する : これはちょっとしたハックですが、ブラウザの検査要素機能を使用して追加されたスペースの量を調べることができます。それを負のマージンにするよりも簡単です。つまり、2 つの要素の間に 4px のスペースがある場合は、次を適用しますmargin:-4px;。(デフォルトでは、ブラウザーはinline-block要素間に 4px のマージン スペースを適用します。) em またはパーセンテージを使用すると、レスポンシブ デザインで機能する可能性があります。
  3. 他のものを使用してください。しようとしている場合vertical-alignはinline-block、常に進むべき道とは限りません。そのための良いリソースは次のとおりです: http://phrogz.net/css/vertical-align/。
于 2013-06-28T01:34:42.920 に答える
3

詳細については、こちらをご覧ください。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

表示: inline-block 余分なマージン

于 2013-06-28T01:22:57.747 に答える