19

これはよくある問題ですが、なぜそれが起こるのか理解できません。

親divがあり、そのdiv内に幅が33％（正確には33.3％ではありません！）に設定された3つのdivがありdisplay: inline-blockます。

Chromeではうまく機能しますが、MozillaとOperaでは機能しません（IEではまだテストしていません）。問題は、ブラウザがパーセンテージからピクセルサイズを計算するために使用するアルゴリズムにあるのではないかと思いました。しかし、DOMメトリックを確認したところ、親の幅は864ピクセルで、子の幅は285ピクセルであることがわかりました（正解：864 * .33 = 285.12）。しかし、なぜそれは親に適合しないのですか？285 * 3 = 855、これは親の幅より9px小さいです！

そうです、すべてのdivのパディング、マージン、ボーダーが0に設定されており、DOMメトリックがそれを確認しています。

4

7 に答える 7

40

HTMLソースコードの空白

HTMLソースコードで、テキストや画像の行、または要素inline-blockの間に空白がある場合（空白、タブ、または新しい行）、それらの間に1つの空白文字が追加されます。ページがレンダリングされます。たとえば、次のHTMLでは、4つのコンテンツのそれぞれの間に空白が表示されます。

one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>

これは、テキスト行、およびテキスト行内に表示される小さな画像やHTML要素に非常に役立ちます。inline-blockただし、テキストの段落内にコンテンツを追加する方法としてではなく、レイアウトの目的で使用する場合は問題になります。

余分なスペースを取り除く

要素間に追加される余分な4px程度のスペースを回避するための最も安全なクロスブラウザーの方法inline-blockは、HTMLタグ間のHTMLソースコード内の空白を削除することです。

たとえば、ul3つのフロートliタグがある場合：

<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
    <li>...</li><li>...</li><li>...</li>   
</ul>

残念ながら、これはWebサイトの保守性を損ないます。コードを判読不能にするだけでなく、データの分離とフォーマットを大幅に損ないます。

別のプログラマーが後でやって来て、各liタグをソースコードの別々の行に配置することにした場合（タグが同じ行にある理由を認識していないか、HTML Tidyを介して実行し、関連するHTMLに気付く機会さえありません）コメント）、突然、Webサイトにフォーマットのバグがあり、識別が難しい場合があります。

代わりにフローティング要素を検討してください

inline-block空白の動作は、テキストの段落のフロー内にコンテンツを追加する以外の目的で使用することは、一般的なレイアウトの目的で使用するのは不適切である可能性があることを強く示唆しています。

inline-blockさらに、特に古いブラウザでは、コンテンツのスタイルと調整が非常に難しい場合があります。

他のソリューションの概要

  1. クローズタグを次のオープンタグと同じ行に、間に空白を入れずに配置します。
  2. HTMLコメントを使用して、閉じるタグと次の開くタグの間のすべての空白を埋めます（@Arbelが提案したように）。
  3. 各要素に負の左マージンを追加します（通常、フォントサイズに基づいて-3pxまたは-4px）。この特定のアプローチはお勧めしません。
  4. font-sizeコンテナ要素のを0または0.01emに設定します。これはSafari5では機能しません（それ以降のバージョンについてはわかりません）。レスポンシブデザインのWebサイト、またはfont-size以外のユニットを使用するWebサイトに干渉する可能性がありpxます。
  5. JavaScriptまたはjQueryを使用して、コンテナーから空白のみのテキストノードを削除します。これはIE8以前では機能しません。要素間に空白しかない場合、要素間にスペースは追加されますが、これらのブラウザーではテキストノードが作成されないためです。
  6. コンテナ用に設定letter-spacingしword-spacingます（@PhillipWillsが提案したように）。詳細情報。これには、Webサイトのサイズを標準化する必要がありemますが、これはすべてのWebサイトにとって妥当なオプションではない場合があります。
  7. text-space-collapse: discard;コンテナに追加します（以前はと呼ばれていましたwhite-space-collapse）。残念ながら、このCSS3スタイルはまだどのブラウザでもサポートされておらず、標準は完全には定義されていません。
于 2013-03-27T06:59:18.677 に答える
6

HTMLの書式設定を台無しにしたくない場合、たとえばinline-block、将来読みやすくするためにすべての要素を1行で記述し、それらの間に追加された余分な空白を削除したい場合は、空白を「コメント」できます。

たとえば、コードではこれで問題が解決し、33％ではなく33.3％でも機能します。

.parent {
    width: 100%;
 }
.child{
    display: inline-block;
    width: 33.3%;
}

/ \

<div class="parent">
       <div class="child">bla-bla1</div><!-- 
    --><div class="child">bla-bla2</div><!-- 
    --><div class="child">bla-bla3</div>
</div>
于 2013-03-27T07:57:56.017 に答える
4

内部divの間にスペースが追加されます。この問題を修正するためのCSSブードゥーがいくつかあります。

div {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}
div div {
    letter-spacing: normal;
    word-spacing: normal;
}

もちろん、親と子を区別するためにクラスなどを使用することをお勧めします。

于 2013-03-27T06:54:25.480 に答える
4

追加float:left;

.parent{
    width: 100%
}
.child{
    float:left;
    display: inline-block;
    width: 33%

}

http://jsfiddle.net/H6Whc/1/

于 2013-03-27T07:11:28.130 に答える
2

誰かがdisplay：tableを試しましたか？それが良い考えではない場合は、なぜですか？これはすべての最新のブラウザーで機能し、IE9までテストしました。

.parent{  
    display: table;
    width: 100%;
}
.containers {
    box-sizing: border-box;
    border: 1px solid #000;
    height: 50px;
    width: 33.3%;
    display: table-cell;
}
于 2014-10-23T19:37:45.030 に答える
1

これは多くのコメントと@Avinによって言及されていますが、削除display: inline-blockして作品に置き換えていfloat: leftます。

.parent{
    width: 100%
}
.child{
    float:left;
    width: 33%
}
于 2014-02-04T07:14:21.813 に答える
-1

display: tableこれは一般的な問題ですが、 CSSプロパティを親divに割り当てることで、非常に簡単に解決できます。

于 2017-03-27T11:41:21.810 に答える