ホームページ  >  記事  >  ウェブフロントエンド  >  スペースによりインライン要素の水平方向の間隔が空けられる_html/css_WEB-ITnose

スペースによりインライン要素の水平方向の間隔が空けられる_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:37:341419ブラウズ

ブロックレベルの要素とインライン要素の違いをテストしたとき、連続するインライン要素の間には水平方向の隙間がある必要があることがわかりました。

1 <span>行内元素</span>2 <span>行内元素</span>3 <span>行内元素</span>4 <span>行内元素</span>

効果は次のとおりです:

この問題の原因は、HTML の Span ノート間のスペースです。スペースを削除すると、隙間はなくなります。

<span>行内元素</span><span>行内元素</span><span>行内元素</span>

効果は以下の通りです:

問題は見つかりましたが、複数のインライン要素があり、コードが 1 行に詰め込まれている場合、読みにくくなります。どうすればよいでしょうか。

詳しい読み方: 1. 【原文】インライン要素に横の隙間ができるのはバグですか - Baishu - Blog Garden

http://www.cnblogs.com/PeunZhang/archive/2012/09/28/ 2706094. html

2. http://davidwalsh.name/remove-whitespace-inline-block

インターネットで情報を検索したところ、「インライン要素の間隔は改行とタブによるもの」とありました。 (タブ文字)、スペース、その他の文字、文字のサイズはフォント サイズを定義することで制御されるため、フォント サイズを変更することからギャップを削除できます。つまり、 font-size: 0; ただし、特定の用途はそれに応じて調整する必要があり、値は必ずしも 0 である必要はありません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。