Overlapping inline div

Question

I have this problem and I'm trying to solve it using jsfiddle but I'm not good in css. Hoping that you can help me solve this. I wanted to separate the next div on the second line. Just a little space to avoid the overlapping. I need it to display inline but the problem is if it goes to the next line, the next line of divs overlaps the previous line of divs. How can I add a margin from it knowing that I'm setting all the divs to display inline?

Thanks in advance :)

Answer 1

Is this acceptable?

http://jsfiddle.net/2bLs7/11/

.a{
    border:solid 1px black;
    display:inline-block;
    margin-bottom: 1px;

    zoom: 1;
    *display: inline
}

Changing to inline-block might not be what you're after, but if you don't mind doing that, this seems good.

I included the hacks necessary to make this work in IE7.

Answer 2

Try this:

.a {
  border: solid 1px black;
  display: inline-block;
  margin: 5px 0 0 0;
}

See there, I use inline-block oppose to inline. margin: 5px 0 0 0; tells it to have 5px of margin on top.

Answer 3

You can add line-height: 150% to it to add a gap.