Why are these elements separated?

Question

I am trying to achieve this simple structure without using floats: http://cl.ly/image/120w2S12213O

I am new to Web Design so I am a bit lost. Why green and red elements are separated by a white gap? It's not padding, nor margin... I can't understand it. Thank you.

This is the HTML:

<body>
    <header></header>
    <section></section>
    <aside></aside>
    <footer></footer>
</body>

And this is the CSS.

body { 
width: 1024px;
height: 612px;
margin: 0 auto; }

header {
position: relative;
top: 0;
width: 100%;
height: 100px;
box-sizing: border-box;
background-color: blue; }

section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block; }

aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 28%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block; }

inline-block treats elements like words in a sentence so any white space between them will be shown - comment out the white space and there won't be a gap. also you have 2% of space missing (70% + 28%) — Pete, May 21 '14 at 12:15
It's the whitespace from the structure of your HTML. This happens because the elements are inline according to your CSS. You can try setting font-size:0 on the body and then re-adjusting it in your sections. — skyline3000, May 21 '14 at 12:16

score 0 · Accepted Answer · answered May 21 '14 at 12:15

It's because you're declaring them as display: inline-block and then you went on a new row in your code, resulting in a blank space. You can fix it with:

<header></header>
<section></section><!--
--><aside></aside>
<footer></footer>

or

<header></header>
<section></section><aside></aside>
<footer></footer>

see this demo: http://jsfiddle.net/jonigiuro/cE4t5/

Also, I don't see a reason tu use display: inline-block and floats together

score 0 · Answer 2 · answered May 21 '14 at 12:16

The space is due to the fact that the element are inline, and inline elements are sensitive to white space. Simply remove the space in your code and the gap goes away.

<header></header>
<section></section><aside></aside>
<footer></footer>

jsFiddle example

score 0 · Answer 3 · answered May 21 '14 at 12:20

0

You must use on the section float:left and put width:30% on the aside:

section {
  position: relative;
  margin: 0;
  padding: 0;
  width: 70%;
  height: 600px;
  box-sizing: border-box;
  background-color: red;
  display: inline-block;
  float: left;
}

aside {
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  width: 30%;
  height: 600px;
  box-sizing: border-box;
  background-color: green;
  display: inline-block;
}

Watch the demo: http://jsfiddle.net/9kELA/

answered May 21 '14 at 12:20

Luís P. A.

9,524
2
23
36

No, he doesn't *have* to use floats to remove the gap. – j08691 May 21 '14 at 13:14
You are right...removing white spaces from them is the better way, but if you format the code automatic it will happen again..is just a way to forcing it. – Luís P. A. May 21 '14 at 13:24

Why are these elements separated?

3 Answers3