A simple understanding of inline-block

1. Concept Display:inline-block

Renders an object as an inline object, but the contents of the object are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height characteristics and inline peer features, and even more, such as inline-block element can also set vertical-align properties. the Inline-block element is a block container that is formatted as an inline element. other inline elements can be displayed on the same line as they are, and spaces are allowed in the middle.

2. Use

(1) Display:inline-block can be used to handle the unequal alignment of elements in rows (list layout), to prevent the presence of excessive elements below the element arrangement, but is squeezed to the bottom right of the element. (Vertical-align:top/bottom; Set the alignment baseline)

(2) Fixed the bilateral distance problem of floating elements in IE6

(3) Horizontal placement of multiple similar block blo CK elements without the need to use float

(4) enables an inline element to have a high wide margin while still maintaining the inline

3. Horizontal gap problem

on the use of Display:inline-block to bring the horizontal gap problem, the cause of this horizontal gap is the main reason is the HTML line breaks, spaces, tabs and other merged into White space, in the case of the font is not 0, the blank character will produce a certain width, That creates a horizontal gap between elements.

The method to resolve this horizontal gap is: (1) The font size is set to 0, that is, font-size:0; Note that the parent element font size setting will affect the child element font size, remember to reset the child element font size! (2) reasonably set the value of letter-spacing (negative values)! (3) reasonably set the value of word-spacing (negative values)! (4) The end tag of the previous label and the start tag of the following label are used consecutively, or the end tag of a nested label is used consecutively, no space! A reasonable use of (1) (2) (3) (4) CSS hack can solve the problem of horizontal gap between elements after Display:inline-block.

4. How to implement Display:inline-block under IE

(1) First use Display:inline-block to trigger the block element, and then define the Display:inline so that the block element is presented as an inline object. Two display must be placed in two CSS declarations to take effect.

div {display:inline-block; ...}
div {display:inline;}

(2) directly let the block element set to inline object Display:inline, and then trigger layout, such as zoom:1;

div {display:inline; zoom:1; ...}

Inline-block's Simple understanding