CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6259

Why is there an gap between the articles?

I created an section with three articles, im wondering why there is an margin/padding betwenn the articles:

enter image description here

My html:

<section id="home">

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

 </section>

And my 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;
}

Upvotes: 0

Views: 288

Answers (5)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

Any two inline or inline-block elements are rendered with a white space between them, even if you have several spaces/new lines separating them in the markup.

For example, these 3 divs, will all render hello world:

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

This happens because the text nodes are inline.

In your case, you need to make sure, the opening <article> is immediately after the previous closing </article>:

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

 </section>

jsFiddle

Taking the above example, here you don't want hello world, you want helloworld, so just remove any spaces between these 2 words in the markup.

Upvotes: 1

Krimson
Krimson

Reputation: 7664

The spaces is added by your browser automaticly.

A widly accepted fix for this is by adding font-size:0 to the parent container and then a reasonable font size to the child elements

In your case you would do this:

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;
}

Upvotes: 1

Vucko
Vucko

Reputation: 20834

There is whitespace between the display:inlin-block elements. Just remove them, example:

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

Or:

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

JSFiddle

Or adding font-size:0; to the parent container, example.

Upvotes: 1

Murali N
Murali N

Reputation: 3498

Try to replace inline-block with block and use float:left Please see this fiddle

JSFIDDLE EXAMPLE

Upvotes: 2

Ray
Ray

Reputation: 884

Display inline block is exactly what it is. An inline element with block properties. So that being said if you have a white space / line break between the elements it will add a gap.

I suggest using display: block and float: left in this case. This method also adds support for older browsers. If you prefer to use inline-block, remove the white space so that the end tag and beginning tag of the elements are directly next to each other.

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

Upvotes: 0

Related Questions