CSS -- inline-block attributes

Inline-block is a value of the element display attribute. The reason for this name is that it can be simply interpreted as inline + block; the element set by display has the characteristics of inline elements and block elements. Block elements are derived from the CSS box model. Block-level elements include width height, padding, border, and margin. They are arranged from top to bottom. In-row elements are arranged horizontally. The inline-block elements in a row is similar to a block element, such as the width height, padding, border, and margin of the block element, the external arrangement is similar to In-row elements, that is, horizontal arrangement, rather than from top to bottom like block-level elements. Therefore, the performance of the inline-block element is not very different from that of the element after the element is set to float. After the box is set to float, it will also be horizontally arranged. Although their implementation principles are different, the internal performance is block-level elements. horizontal arrangement is suitable for both floating and inline-block implementations. How to choose between the two depends on your design draft and solution. If you need text to wrap the container, floating is the best choice. This is because the floating element leaves the Document Stream and makes the surrounding element surround this element. The inline-block element is still in the Document Stream. If you need to center the alignment element, inline-block is a good choice. Obviously, you cannot set text-align for the parent element: center floating elements. In fact, when the positioning class property is set to the parent element, the floating element in the parent element is not affected. However, if the display: inline-block option is set for the element in the parent element, some positioning attributes of the parent element will affect the child element. Use inline-block: When you need to control the vertical alignment and horizontal arrangement of elements, use inline-block. Floating: When you want to enclose an element, or you want to support the earlier version of ie, or do not want to handle the blank issues caused by inline-block, floating is used. For the image list. If the height of the image in the parent element is high, the setting of floating will work normally. However, when one column of images is relatively high, the image arrangement may fail. This is because, after floating, the image is out of the Document Stream. This problem does not occur because the inline-block is not out of the Document Stream. If you want to create another image column, it will not be affected by the inline: block of the previous image column, so you do not need to clear the float. When using the provided message, you must always pay attention to the floating point. When the content is constantly changing, this can easily cause bugs.