0

I am trying to create a grid made up of dots, lines, and boxes (all div elements). For some reason it seems like they start out with something like margin: 2px; and setting margin: 0px doesn't get rid of this. Setting -2px gets me somewhere. But what is the deal here? Why aren't they touching?

The markup alternates between these two divs:

<div class="row_short">
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
    <div class="hbar"></div>
    <div class="dot"></div>
</div>
<div class="row_tall">
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
    <div class="square"></div>
    <div class="vbar"></div>
</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
}
table {
    margin: 0px;
    padding: 0px;
}
.dot {
    height:5px;
    width:5px;
    background-color:black;
    display: inline-block;
}
.vbar {
    height:30px;
    width:5px;
    background-color: #CCCCCC;
    display: inline-block;
}
.vbar:hover {
    background-color:purple;
}
.hbar {
    height:5px;
    width:30px;
    background-color: #CCCCCC;
    display: inline-block;
}
.hbar:hover {
    background-color:purple;
}
.square {
    height:30px;
    width:30px;
    background-color: #ff88cc;
    display: inline-block;
}
.row_short {
    display: inline-block;
    position:relative;
}
.row_tall {
    display: block;
    position:relative;
}

JSFiddle

Huangism
  • 16,278
  • 7
  • 48
  • 74

1 Answers1

0

You have whitespace in your code which is being rendered as spaces, creating the illusion of a 2px gap.

You can either reduce the code to a one-liner:

<div class="dot"></div><div class="hbar"></div>...

or use comments to delimit the line breaks and spaces:

<div class="dot"></div><!--
--><div class="hbar"></div>

You could also set font-size: 0; on a parent element (in the demo it would have to be body but that's a bad idea for obvious reasons), which will also collapse up all the spacing without having to edit the HTML. You'd need to reset font-size: 1rem to child elements if you wanted text in there, though.

Joe
  • 15,669
  • 4
  • 48
  • 83
  • An important bit missing here is that this is all caused by `display: inline-block;` (and is following the spec). – ajp15243 Sep 18 '14 at 14:36
  • is there a display: option that I should be using for the desired result? Block will make them stack vertically, no? –  Sep 18 '14 at 14:37
  • I believe you could `float: left;` with `overflow: hidden;` on the parent block-level row, but I'd personally just tweak the markup, it's the lowest-maintenance thing to do. If you can avoid needing to work around something in your CSS that easily, it's probably worth just avoiding working around it :-) – Joe Sep 18 '14 at 14:39
  • 2
    Setting `1em` to a child of an element with a font size of `0` will also be zero, since `em` works like a multiplication, and multiplying with `0` will always has a result of `0`. – SeinopSys Sep 18 '14 at 14:44
  • True; I meant `1rem` to pull from the `body` font-size – Joe Sep 18 '14 at 15:47