html - space between divs when using text-align

Question

I used text-align: center to to position three divs. But there is a small gap between each and every div. Why is it so? the picture is giving below? The divs are displayed as inline-block.

Answer 1

HTML ではコード内の改行がスペース文字として表示されるため、インライン ブロック要素の間にはスペースが含まれることがよくあります。

たとえば、これは各 div の間にスペースがあります。

<div>blah</div>
<div>blah...</div>
<div>blahblah...</div>

コード内のスペースを取り除くなど、これにはさまざまな回避策があります。

<div>blah</div><div>blah...</div><div>blahblah...</div>

または、親要素をfont-size: 0設定してから、子 div を任意のフォント サイズに設定します。

個人的には、これはこのテーマに関する興味深い投稿だと思いました: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

div要素が表示されている場合、inline-blockそれらの間にスペースがあるのは、要素間のすべての新しい行とスペースを認識し、divそれらを 1 つのスペース文字にトリミングするためです。それがあなたが見ている空間です。

float: left;これは、状況に該当するかどうかを使用して解決できます。もちろん、フロートのために、それらを独自のブロック書式設定コンテキストに限定する必要がある場合があります。

div別の解決策は、要素間の新しい行とスペースを取り除くことです。次のようにできます。

HTML:

<div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div>

Answer 3

絶対に使用する必要がない限りdisplay: inline-block;、幅広いソリューションについては、私の回答の下部にあるリンクを参照してください。

最適な解決策は、デフォルトで隣り合ってフロートするため、に変更display: inline-block;することです。float: left;

その場合は、デフォルトをオフセットするinline-blockために追加する必要があります。margin-right: -4pxmargin-right

HTMLこれは、質問の/の欠如に基づいていCSSます。

inline-blocksデフォルトのマージン、CSS-Tricks Inline-blockを処理するためのいくつかのオプションを次に示します。