no margin or padding - but still space between div elements

Question

Its not the first time that this is confusing me.

<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

#wrap {
width:400px;
height:200px;
background:red;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.content {
width:100px;
height:200px;
display:inline-block;
background:green;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

You may get a better understanding when viewing it on JSFiddle

JSFiddle Example

For my understanding the four divs should fit exactly inside the parent div, but there is a space in between them - and i dont understand where its coming from.

would be great if somebody could clear this up for me.

Just write all your markup on a single line: http://jsfiddle.net/e86L9/4/ — emerson.marini, Jun 04 '14 at 11:31

score 25 · Answer 1 · answered Jun 04 '14 at 11:33

25

This is due to font-size. You will need to set font-size: 0px on the #wrap element. http://jsfiddle.net/52eaz/

answered Jun 04 '14 at 11:33

Stefan Dunn

5,363
7
48
84

i picked this solution - because its the one that makes least sense to me, if any at all. works great though, thanks mate. – user3312607 Jun 04 '14 at 11:57
I'd suggest that you select it as the answer for future users. – Stefan Dunn Jun 04 '14 at 14:36
The simple reasoning is that CSS property, `letter-spacing`, by default is proportional to the value of `font-size` (which prevents letters [and other inline elements] to bunch up together). Setting `font-size: 0` removes that spacing. – Stefan Dunn Jan 29 '19 at 00:31
Hmm, yes, apparently font-size adds a margin. I don't know how you figured that out. – Darin Cardin Feb 06 '23 at 00:56

score 0 · Answer 2 · answered Jun 04 '14 at 11:32

do you want something like this?

http://jsfiddle.net/e86L9/12/

#wrap {
    width:400px;
    height:200px;
    background:red;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.content {
    float:left;
    width:100px;
    height:200px;

    background:green;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

no margin or padding - but still space between div elements

2 Answers2