Margin between span/div blocks not setting to 0px

Question

I have some span/div blocks with width and height defined and display set to inline-block but there is some gap between those blocks so i used margin:0px; but there is still gap i have to use negative margin value to remove that gap. Here is the code i am using

//HTML SPAN BLOCKS//
<body>
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</body>

//CSS//

body{margin:0px;}
.pro{
    width:300px;
    height:300px;
    display:inline-block;
    border:1px solid #FF0004;
    margin:0px;
    padding:0px;
}
#1{
    background:#FF0004;
}

and i am giving background with id but its not working. Margin between span blocks works is 0 (when set to 0) in internet explorer.

JSFIDDLE

When i add some content(text) in those tags whole layout is messed up . All blocks moves up and down from its position

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Turnip, Sep 01 '15 at 18:34
since you've put each span on its own line in the code, and since all whitespace gets truncated to a single space, there are literally ` ` characters in between your span elements. you can put them [all on the same line](https://jsfiddle.net/a2r1g98w/) or set the parent's font-size to 0. — Woodrow Barlow, Sep 01 '15 at 18:34

score 2 · Answer 1 · answered Sep 01 '15 at 18:39

this space between inline-block elements is caused by font-size of the parent, in your case the BODY element. To fix this issue set font-size of the parent element to 0 then define new font-size inside .pro elements.

Here is the solution without affecting font-size of body element by wrapping content with .clearGaps container.

https://jsfiddle.net/jrv4zp5d/1/

html:

<div class="clearGaps">
    <span class="pro" id="1"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
</div>

css:

body{
    margin: 0px;
}
.clearGaps {
    font-size: 0;
}
.pro{
    width:300px;
    height:300px;
    display:inline-block;
    border:1px solid #FF0004;
    font-size: 12px; /* restore font size after clearing gaps */
}
#1{
    background:#FF0004;
}

Good luck

score 1 · Accepted Answer · answered Sep 01 '15 at 18:37

id's that start with a number will not work in css, unless you escape them in your stylesheet (which I wouldn't advise). So I would suggest changing your id to something like #p1 and you should be fine.
inline(-block) elements take whitespace into account. If you remove the whitespace from your markup, or set the font-size to 0, the spacing between the blocks should disappear. Or you could turn them into block elements as well.

And your updated fiddle:https://jsfiddle.net/jrv4zp5d/2/

score 1 · Answer 3 · answered Sep 01 '15 at 18:39

1

CSS:

span {
  display: inline-block;
}

HTML:

<span>This will have</span>
<span>a gap between the elements</span>

<span>This won't have</span><span>a gap between the elements</span>

originally @Juan G. Hurtado

answered Sep 01 '15 at 18:39

stackoverfloweth

6,669
5
38
69

score 1 · Answer 4 · answered Sep 01 '15 at 18:48

1

Alternatively, for a CSS only approach, you can try changing the display of .pro to block and specify a float.

.pro{
width:300px;
height:300px;
display:block;
float:left;
border:1px solid #FF0004;
margin:0;
padding:0;
}

answered Sep 01 '15 at 18:48

King Size

397
1
6

Margin between span/div blocks not setting to 0px

4 Answers4