Solution to the gap problem caused by display:inline-block

We often use Display:inline-block in the layout of Web pages, with the advantage of being able to lay out blocks of elements in the same way as inline elements and to set the width height. Personal feeling is very useful, but with more slowly the problem is coming?

1.display:inline-block; incompatible in IE6/7

Solution: Display:inline-block;*dsiplay:inline;*zoom:1;

2.display:inline-block; will produce inexplicable gap (4PX)

Cause: line breaks or spaces occupy a certain position, resulting in gaps,

Workaround:

1. In the HTML code to remove the current element of space or line wrapping, the method is too cumbersome, and affect the readability of the HTML code, do not agree.

2. Set font-size:0 in the parent element of the current element, which 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, which can control the horizontal distance between the text, allowing the text to overlap horizontally (line-height is to overlap the text vertically), which offsets the space or line-break placeholder.

The conclusions are as follows:
»block level of elements inline-block, IE6/7 No line break gap problem, other browsers have;
»inline level element Inline-block, all major browsers have line break/space gap problem;
»font-size:0, remove line break gap, residual 1 pixels under IE6/7, Chrome browser is invalid, other browsers are perfectly removed;
»letter-spacing negative values can remove all browser line breaks, but Opera browser limits are 1 pixels in space, 0 pixels bounce, and line breaks are restored.

Recommended Workaround:

Set font-size:0;letter-spaceing:-4px at the same time;

This article refers to Zhang Xin Asahi's farewell, floating layout-based on the Display:inline-block list layout

Solution to the gap problem caused by display:inline-block