div's have to much space

Question

I have a line of divs, but half of them should only be lines to connect the other divs. Now even though I set the margin to 0px, there is still a little bis space left between those divs. But I decide to roll with it, since it looks good. But now I have the problem that this space isn't there for divs printed with php. Why is that and how can I fix it? I tried adding margin but that won't change anything.

Here's the code I have: http://codepad.viper-7.com/AI28E7

As you can see it begins with the fifth div, which is also the first to be printed using php.

Answer 1

The issue is with whitespace. You actually don't have any margins on your dividers or your boxes. Set either one to have margin left and right.

.vert {
   margin-left: 5px;
   margin-right: 5px;
}

Also, inline-block elements will show whitespace before and after them. You could set the div's back to display as block and float them left, along with the dividers. You will have to change the vert style to be margin-top instead of margin-bottom though.