We often use display:inline-block in web layouts; The advantage is that you can arrange block elements as inline elements and set the width and height. Personal feeling is very easy to use, but with more slowly came the problem?
1.display:inline-block; Not compatible in IE6/7
Display :inline-block; *dsiplay:inline; *zoom:1;
2.display:inline-block; There will be an unknown gap (4px)
Reason: A newline or space can take up space and create a gap,
Solutions:
1. Remove whitespace or newline from the current element in the HTML code. This method is too cumbersome and affects the readability of the HTML code.
Font-size :0; font-size:0; font-size:0; This is essentially the same as the 1 method, but may not be supported in Chorme
3. Set letter-spaceing:-4px in the parent element of the current element; The effect is to control the horizontal distance between the text, allowing the text to overlap horizontally (line-height is the text to overlap vertically), thus cancelling out space space or newlines.
Conclusions are as follows:
» the inline – after the block, block level elements IE6/7 no newline gap problem, other browsers have;
» after the inline – block, the level of the inline elements, all major browsers have a newline/space gap problem;
> font-size:0; font-size:0; font-size:0; font-size:0; font-size:0; font-size:0;
» spacing is removed from all browsers by the let-spacing negative value. However, Opera’s spacing limit is 1 pixel. 0 pixels will bounce back and the spacing will be restored.
Recommended solutions:
Font-size :0; letter-spaceing:-4px;
 
 
Floating Layout – List Layout Based on Display: Inline-Block

Reproduced in: https://www.cnblogs.com/jesse131/p/4872721.html