Inline-block the problem of producing blank gap

A blank gap was encountered in the project to set the Display:inline-block property

Such as:

#wrapper {    border: 1px solid blue;} #wrapper Div {    width: 100px;     height:100px;     display:inline-block;     background: #eee;}

<DivID= "wrapper">    <Div>Div1</Div>    <Div>Div2</Div>    <Div>Div2</Div></Div>

：

Workaround: Set the font-size:0 for the parent container; The Display:inlie-block element needs to display the font and add extra.

Reason:

In fact, this problem is caused by our habit of writing code. Usually we write code, in order to make the code appear "hierarchical", usually after the end of the tag to hit a carriage return, and the carriage return will produce a carriage return, the carriage return is equivalent to a blank character, usually, multiple consecutive white space characters will be merged into a blank character, and create a "blank gap" The real reason for this is that we don't pay much attention to the whitespace.

Now that we know the cause of the problem, it's a good idea to solve the problem. Whitespace is also a character, as long as the character will be associated with the font, font size and so on. So the removal of whitespace characters only need to set the font size to zero on the line (font-size:0;)

Inline-block the problem of producing blank gap