0

I am trying to get rid of the space between s. I want this grid to be 4 divs across exactly. I have already tried setting all margins and padding and borders to 0.

http://jsfiddle.net/UUQw8/1/

<div id="grid">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

#grid{
    width: 100px;
    height: 100px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
.child{
    background-color: lightpink;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
Captain Stack
  • 3,572
  • 5
  • 31
  • 56
  • 1
    This is a typical characteristic of `inline` elements.. see [this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859) – Josh Crozier Mar 08 '14 at 21:50
  • Also note that the vertical space belongs to the line height reserved character, as the inline elements are aligned in their baseline by default. You can align them vertically by `vertical-align: middle` to remove the vertical gap: http://jsfiddle.net/hashem/UUQw8/2/ – Hashem Qolami Mar 08 '14 at 21:57

3 Answers3

2

Inline elements allow whitespaces. To remove this either you can use float:left on child elements (div in your case) or font-size:0px to the parent element (i.e grid)

.child
{
float:left;
}

OR

#grid
{
font-size:0px;
}
Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56
0

you need a float:left; in the child class.
this will make the div's go as far to the left as they can, and when they run out of space inside the #grid div, they continue on the next line, luch like reading.
somethims though, this needs a empty div, at the end of it, with the style clear:both; witch alighs it nicely, and makes sure that nothing "glitches", somethimes that happens.

I've made i fiddle for you:

jsfiddle.net/WQdxS/

John Bertelsen
  • 34
  • 7
0

You can set:

.child{
    display: block;
    float: left;
}

To fix the issue & get a 4x4 grid w/no spaces.

As stated above, the issue is using display-inline.

Divs are supposed to be block-level elements anyway. Why make these inline? Treat them as block-level elements & the problem solves itself w/o resorting to quirks like removing white space or arbitrarily setting font-size:0 for an element that doesn't contain any text.

mc01
  • 3,750
  • 19
  • 24