Unknown extra margin

Question

I have a few div elements, that I want to align with 20px margin. However when I set my margin to 20px, there are additional 4 pixels rendered. Here is the code:

.block{
    width:50px;
    height:50px;
    background:red;
    display:inline-block;
    margin-right:20px;
    vertical-align:top;
}

*{
    margin:0
    padding:0
    border-width:0px;
}

Check https://jsfiddle.net/zyfzbyed/8/ with inspector. The question is: How can i remove that extra margin? Thanks.

score -1 · Answer 1 · answered Jan 10 '16 at 18:14

-1

You can add float:left; to .block in CSS to remove the extra-margins created by inline-block element. your css for block should be:

.block{
  width:50px;
  height:50px;
  background:red;
  display:inline-block;
  margin-right:0px;
  vertical-align:top;
  float: left;
}

answered Jan 10 '16 at 18:14

Saqib Amin

1,171
7
16

That removes the problem but doesn't solve it. To learn, read more on the dupe link above. – Asons Jan 10 '16 at 18:19

score -1 · Accepted Answer · answered Jan 10 '16 at 18:17

-1

in your HTML use

<div class='block'></div><div class='block'></div>

instead of

<div class='block'>

</div>
<div class='block'>

</div>

if you want to fix this via CSS you should set div's flow to left as follow

.block{
    width:50px;
    height:50px;
    background:red;
    display:inline-block;
    margin-right:0px;
    vertical-align:top;
    float: left;
}

answered Jan 10 '16 at 18:17

Arash Hatami

5,297
5
39
59

That removes the problem but doesn't solve it. To learn, read more on the dupe link above. – Asons Jan 10 '16 at 18:19
Oh, so the problem was additional space in HTML. Thanks. – Jaka Kordež Jan 10 '16 at 18:32
1

@JakaKordež yes of course, everything depend on how to use of your classes – Arash Hatami Jan 10 '16 at 20:25

Unknown extra margin

2 Answers2