Phantom Margin coming from somewhere

Question

I want four 'square' divs to be displayed close together with 0 margin and 0 padding etc. So they resemble one big square

I have used the

*{

 }

selector and my browser recognises it, and no margin and padding can be found through my dev tools. However there is still space. Any help greatly appreciated

http://jsfiddle.net/fwwzba14/

HTML

<div id="container">

        <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>




    </div><!-- Container close -->

CSS

*{
margin: 0;
padding: 0;
}

body{
background: black;
}
#container{
width: 960;
margin: 0 auto;
}

.wrapper{
display: inline-block;
float: center;
}
.box{
width: 240px;
height: 240px;

background: white;
}

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) — emmanuel, Dec 02 '14 at 11:52
Use a negative left margin, for example: `margin: 0 0 0 -6px`. 6px usually does it. — logic-unit, Dec 02 '14 at 11:58
@logic-unit That's the worst solution i've ever heard for this problem, some white spaces are bigger than others so your negative margin won't solve it. — Nick, Dec 02 '14 at 12:01
@Nick just one of many options, hence the comment rather than answer. Other cowboy `solutions` here: http://davidwalsh.name/remove-whitespace-inline-block — logic-unit, Dec 02 '14 at 12:09

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

It is the white-space between inline elements (the same as the space between inline words). It is not a margin.

There are several ways to remove the white-space between inline-block elements or you can use float:left; :

* {
    margin: 0;
    padding: 0;
}
body {
    background: black;
}
#container {
    width: 960px;
    margin: 0 auto;
}
.wrapper {
    float: left;
}
.box {
    width: 240px;
    height: 240px;
    background: white;
}

<div id="container">
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</div>
<!-- Container close -->

You also forgot to set the unit on the width of the #container (px).

score 1 · Accepted Answer · answered Dec 02 '14 at 11:58

1

I slightly edited your CSS. There were 2 errors:

*{
margin: 0;
padding: 0;
}

body{
background: black;
}

#container {
width: 960px; /* note: "px" - a unit is necessary */
margin: 0 auto;
}

.wrapper {
display: inline-block;
float: left; /* note: "left" - float "center" does not work */
}

.box {
width: 240px;
height: 240px;
background: white;
}

Now the code works as you described it. 1 big square, and no clearances in between.

answered Dec 02 '14 at 11:58

stylesenberg

519
3
16

3

You might consider explaining what you did. – Nick Dec 02 '14 at 11:59

score 0 · Answer 3 · answered Dec 02 '14 at 12:05

0

I can't explain why, but I found that adding font-size: 0; to the #container selector fixed this issue.

http://jsfiddle.net/fwwzba14/2/

answered Dec 02 '14 at 12:05

Tom B

11
2

Phantom Margin coming from somewhere

3 Answers3