Inline blocks: exploring their spatial properties

Question

There is a strange gap between inline blocks. I can live with it until I load more content with an AJAX call and this little gap disappears. I know I'm missing something here.

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0;
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

How can I make the spacing between inline blocks consistent?

Answer 1

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- 这里没有空格或换行符。

Your spaces are line breaks that the browser converts into "spaces" when displayed.

Or you could try using CSS to make some small adjustments:

A flexbox will conveniently ignore spaces between its child elements and will be displayed like a continuous inline-block element.

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Answer 2

Spaces in HTML. There are several possible solutions. From best to worst:

1. Remove actual whitespace in the HTML (ideally the server can do this for you when serving the file, or at least your input template can add whitespace appropriately) http://jsfiddle.net/ AWMMT/2/
2. Use float: left instead of display: inline-block, but this will have a bad effect on the height: http://jsfiddle.net/AWMMT/3 /
3. Set the font-size of the container to 0 and the appropriate font-size for the inner elements: http://jsfiddle.net/AWMMT/4 / - This is very simple, but you can't take advantage of relative font size rules (percentage, em) on inner elements