What is this little distance between elements?

Question

(Solved by suggestion of duplicate- I deleted whitespace between elements, like explained there: How to remove the space between inline-block elements?)

I am doing the HTML/CSS example for other ppl.

I have defined

*{
  padding: 0px;
  margin: 0px;
  font-size: 80%;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  border: 0px;
 }

 body{
  width: 100%;
 }

And the

<div class="wrapper">

With styling

width: 1920px;
display: block;
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: top;

The wrapper contains the aside, and main

<aside>[...]</aside>
<main>[...]</main>

Aside is styled as:

position: relative;
width: 1010px;
padding-top: 100px;
display: inline-block;
background-color: lightgray;

Main is styled as:

  width: 810px;
  display: inline-block;
  height: 1em;
  background: #333 none repeat scroll 0 0;
  vertical-align: top;
  border: 0px;

And my question is: Why these elements don't stick together[?], between them is like 5 pixels of blank space. http://scr.hu/8rxi/9smmb (note: the red part of circle is another part of excercise)

What is this little distance between elements?

0 Answers0