<p>これらの <span>span</span> 要素の間には 4 ピクセル幅のスペースがあります: </p>
<pre class="ブラシ:css;ツールバー:false;">スパン {
表示: インラインブロック;
幅: 100ピクセル;
背景色: ペールバイオレット;
}</pre>
<pre class="brush:html;toolbar:false;"><p>
<span> フー </span>
<span> バー </span>
</p></pre>
<p>フィドルのデモ</p>
<p>HTML 内の <span>span</span> 要素の間のスペースを削除することで、このスペースを削除できることはわかっています。
<pre class="brush:html;toolbar:false;"><p>
<span> Foo </span><span> Bar </span>
</p>
</pre>
<p>以下を含まない CSS ソリューションを探しています: </p>
<li>HTMLを変更します。 </li>
<li>JavaScript を使用します。 </li>
</ul>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS3 標準に準拠するブラウザの場合、
を使用できます。white-space-collapses:discard属性参照: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
または、flexbox を使用して、これまでに inline-block を使用して実現していたレイアウトの多くを実現できます。 https://css-tricks.com/snippets/css/a- -flexbox/
へのガイドこの回答は非常に人気があったので、書き直しました。
実際に尋ねられた質問を忘れないでください:
この問題は CSS のみを使用して解決できますが、完全に安定した CSS 修正はありません。
元の回答で私が提案した解決策は、親要素に
font-size: 0を追加し、子要素で適切なfont-sizeを宣言することでした。http://jsfiddle.net/thirtydot/dGHFV/1361/
これは、最新のすべてのブラウザの最新バージョンで動作します。 IE8でも動作します。 Safari 5 では動作しませんが、Safari 6 では動作します。 Safari 5 はほぼ廃止されたブラウザです (0.33%、2015 年 8 月)。
相対的なフォント サイズに関連する問題のほとんどは複雑ではありません。
ただし、HTML を自由に変更できる場合 (ほとんどの人は変更可能です)、これは合理的な解決策ですが、お勧めできる解決策ではありません。
経験豊富な Web 開発者として、この問題を実際に解決した方法は次のとおりです:
リーリーはい、それだけです。 HTML 内のインライン ブロック要素間のスペースを削除しました。
＃＃＃それは簡単です。これはとても簡単です。どこでも機能します。これは現実的な解決策です。
空白の原因について注意深く考える必要がある場合があります。 JavaScript を使用して別の要素を追加すると、スペースが追加されますか?いいえ、正しく実行すれば。
魔法の旅に出て、新しい HTML を使用してスペースを削除するさまざまな方法を学びましょう:リーリー
リーリー
http://jsfiddle.net/thirtydot/dGHFV/1362/
- または、次のようにします:
- または、コメントを使用します:
- または、PHP または類似のものを使用している場合:
- あるいは、
font-size: 0
を忘れていただければ幸いです。リーリー
リーリー
リーリー
特定の 終了タグを完全に省略することもできます (すべてのブラウザでサポートされています): リーリー
「thirtydot のスペースを削除する千種類の方法」に飽きてしまったので、