ちょうど 33% の幅を持つ 3 つのインラインブロック div が親に収まりません質問する

Question

HTMLソースコード内の空白

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

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

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

余分なスペースを削除する

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

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

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

残念ながら、これはウェブサイトの保守性を損なうことになります。コードが読みにくくなるだけでなく、データとフォーマットの分離。

後から別のプログラマーが来て、各liタグをソースコードの別の行に配置することにした場合 (タグが同じ行にある理由を知らないか、HTML Tidy を実行しても関連する HTML コメントに気付く機会さえなかった可能性があります)、突然、Web サイトにフォーマットのバグが発生し、特定が困難になる可能性があります。

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

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

inline-blockさらに、特に古いブラウザでは、コンテンツに完全なスタイルを設定したり配置したりすることが非常に難しい場合があります。

その他のソリューションの簡単な概要

閉じタグを次の開きタグと同じ行に配置し、その間に空白を入れないでください。
HTML コメントを使用して、閉じタグと次の開始タグの間の空白をすべて埋めます (@Arbel の提案どおり)。
各要素に負の左マージンを追加します (通常はフォントサイズに基づいて -3 ピクセルまたは -4 ピクセル)。この特定のアプローチはお勧めしません。
コンテナ要素のを0または0.01emに設定しますfont-size。これはSafari 5では機能しません（それ以降のバージョンではわかりません）。また、レスポンシブデザインfont-sizeウェブサイト、または以外の単位を使用するウェブサイトpx。
JavaScript または jQuery を使用して、コンテナーから空白のみのテキストノードを削除します。これは IE8 以前では機能しません。これらのブラウザーでは、要素間に空白のみがある場合、テキストノードは作成されませんが、要素間にスペースは追加されます。
コンテナーに対してletter-spacingとを設定します(@PhillipWills の提案どおり)。word-spacingさらに詳しい情報これにはemウェブサイト上のサイズを標準化する必要があり、すべてのウェブサイトにとって適切な選択肢ではない可能性があります。
text-space-collapse: discard;コンテナ（以前はと呼ばれていました）に追加しますwhite-space-collapse。残念ながら、このCSS3スタイルまだどのブラウザでもサポートされておらず、標準も完全に定義されていません。

Answer 1