0

3 つの記事を含むセクションを作成しましたが、なぜ記事の間にマージン/パディングがあるのか​​疑問に思っています。

ここに画像の説明を入力

私のhtml：

<section id="home">

 <article>
<h1>Übersicht</h1>
 </article>
 <article>
<h1>Leute</h1>
 </article>
 <article>
<h1>Links</h1>
 </article>

 </section>

そして私のCSS：

section { width: 87%;
    margin: 0px auto;
     }

article {
    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}
4

5 に答える 5

1

inline-block を block に置き換えて使用してみてfloat:leftください このフィドルを参照してください

JSFIDDLE EXAMPLE

于 2013-10-13T16:13:40.723 に答える
1

要素間に空白があります。display:inlin-blockそれらを削除するだけです。例：

<section id="home">
    <article><h1>Übersicht</h1></article><!--
    --><article><h1>Leute</h1></article><!--
    --><article><h1>Links</h1></article>
</section>

または：

<section id="home">
    <article><h1>Übersicht</h1></article><article><h1>Leute</h1></article><article><h1>Links</h1></article>
</section>

JSFiddle

または、親コンテナーに追加font-size:0;します。

于 2013-10-13T16:13:51.500 に答える
1

マークアップでそれらを区切る複数のスペース/改行がある場合でも、任意の 2 つinlineまたは要素は空白でレンダリングされます。inline-block

たとえば、次の 3 つの div はすべてレンダリングされますhello world。

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

これは、テキスト ノードがinline.

あなたの場合、オープニング<article>が前回のクロージングの直後であることを確認する必要があり</article>ます。

<section id="home">
 <article>
<h1>Übersicht</h1>
 </article><article>
<h1>Leute</h1>
 </article><article>
<h1>Links</h1>
 </article>

 </section>

jsフィドル

上記の例を例にとると、ここでは が不要hello worldで、 が必要helloworldなので、マークアップ内のこれら 2 つの単語の間のスペースをすべて削除してください。

于 2013-10-13T16:14:30.050 に答える
1

スペースはブラウザによって自動的に追加されます。

これに対する広く受け入れられている修正方法はfont-size:0、親コンテナーに追加してから、適切なフォント サイズを子要素に追加することです。

あなたの場合、これを行います：

section {
    font-size: 0;     //Must be zero
}

article {
    font-size: 10px;  //can be anything you want

    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}
于 2013-10-13T16:20:02.783 に答える
0

インラインブロックの表示はまさにそれです。ブロック プロパティを持つインライン要素。つまり、要素間に空白/改行があると、ギャップが追加されます。

この場合、display: block と float: left を使用することをお勧めします。この方法では、古いブラウザーのサポートも追加されます。インライン ブロックを使用する場合は、空白を削除して、要素の終了タグと開始タグが直接隣り合うようにします。

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

于 2013-10-13T16:09:55.230 に答える