Removing margin on inline-block element after wrapping lines

Question

I\'m hoping there\'s a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear

Answer 1

Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.

Fidlle: http://jsfiddle.net/xKVG3/

---

#wrapper { text-align:center; }

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top;
}

#elem1 {
    background-color: #f00;
}

#elem2 {
    background-color: #00f;
}

#wrapper > div {
    display:inline;
}

#wrapper > div:after {
    content: ' ';
    font-size:12.5em;
    line-height:0px;
}