Why is there an gap between the articles? - html

Question

I created an section with three articles, im wondering why there is an margin/padding betwenn the articles:
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;
}

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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/