A brief analysis of inline-block using inline-block to create layout_html/css_WEB-ITnose

Inline-block front-end programmers are certainly familiar with it. It is a value of the display attribute.

The reason why it is called inline-block. Because it has the characteristics of both inline elements (inline-element) and block-level elements (block-element).

Block elements (block elements) , derived from the CSS box model. Block-level elements include width height, padding, border and margin, and they are arranged from top to bottom. Inline elements are arranged horizontally. Inline elements are arranged horizontally. Inline-block elements Internally, it behaves like a block element. For example, it has the width height of the block element, that is, it can set its own height and width values. You can set your own padding, border and margin, and the external arrangement is similar to inline elements, that is, arranged horizontally instead of from top to bottom like block-level elements.

Replaced element

Speaking of this, it is necessary to mention the replacement element . What is a replacement element? In HTML, there are special elements such as:

They are called replaceable elements. What distinguishes them from general inline elements (relatively speaking, non-replaced elements) is that these elements have intrinsic dimensions (intrinsic dimensions), and they can set the width/height attributes. Their properties are the same as elements with display:inline-block set. The above six tags are natural inline-block elements in modern browsers.

Wrapping

Another way of saying wrapping is to make elements inline-block. This means that by default the width of a div is displayed at 100%, and once the postion:absolute attribute is added to the div, the default width of 100% will become the adaptive internal element width. And such as:

overflow | position:absolute | float:left/right, etc. can make the element inline-blocked to produce wrapping.

Wrapping has many functions, one of which is that it can be used to clear the floating elements.

The role of inline-block

When creating a website with css layout, floating definitely occupies a large proportion. Large Floating shadows can be seen in block areas such as the main content and sidebar, as well as in small areas within them. It’s just that floating often causes some problems, so what’s the problem? Is floating the only solution?

Floating usually behaves normally, but sometimes it can be confusing. Especially when dealing with floats in internal containers, such as alignment problems after using floats on a row of pictures. So, inline-block is another option for us. Using this property can simulate the characteristics of partial floats without having to deal with the problems caused by some floats.

Here I highly recommend an article by Zhang Xinxu: Goodbye floating layout - list layout based on display:inline-block. The article explains very thoroughly, and also provides very detailed and reliable solutions to the compatibility issues that need to be solved when using inline-block.

The difference between inline-block and float

Although setting float has some characteristics similar to setting inline-block, the difference between the two is still very different Obvious:

Document flow : The floating element will break away from the document flow and cause surrounding elements to surround this element. The inline-block element is still within the document flow. Therefore setting inline-block does not require clearing floats. Of course, surrounding elements will not wrap around this element, and you can't make an element go underneath it by clearing the inline-block. Horizontal position : Obviously you cannot center a floated element by setting text-align:center on the parent element. In fact, setting the positioning class attribute to the parent element will not affect the floating elements within the parent element. However, if the element within the parent element has display: inline-block set, setting some positioning attributes on the parent element will affect the child elements. (This is also because the floating elements are out of the document flow). Vertical alignment : Inline-block elements are aligned along the default baseline. Floated elements stick to the top. You can set this default baseline through the vertical attribute, but this method does not work for floated elements. This is also the main reason why I prefer inline-block. Whitespace : inline-block contains html whitespace nodes. If a series of elements in your html have line breaks between each element, when you set inline-block on these elements, whitespace will appear between these elements. Floated elements will ignore blank nodes and stick to each other IE6 and IE7 : Ie67 partially supports this attribute. If you want to be compatible with these browsers, you must solve this problem. You can refer to the N methods of removing the spacing between inline-block elements .