Block, inline-block, inlineinline-block

Block, inline-block, inlineinline-block

The display: block element has the following features:
Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.
<Div>, <p>,
The display: inline element features:
And other elements are on one line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed.
<Span>, <a>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

 

Display: inline-block: the object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed.

Features of inline-block elements:

The object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed. (To be precise, the elements applying this feature are rendered as inline objects, and the surrounding elements are kept in the same row, but attributes of the width and height of the plot element can be set)

Not all browsers support this attribute. Currently, the following browsers are supported: Opera and Safari use display: inline-block for inline elements in IE. IE does not recognize this attribute, but display: inline-block triggers layout in IE, so that the inline element has the table disease of the display: inline-block attribute. From the above analysis, it is not difficult to understand why setting the display: inline-block attribute for block elements in IE cannot achieve the effect of inline-block. At this time, the block element is only triggered by the display: inline-block layout, and it is the row layout, so after the triggering, the block element is still the row layout, instead of submitting an inline object as a block element in Opera.

The following example illustrates the differences between block, inline, and inline-block:

/*** Html page code ***/<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
/*** Css style code ***/ul, li {margin: 0; padding: 0; list-style: none ;}# tabfirst li {float: left; color: white; padding: 5px; margin-right: 2px; background-color: #868686; border: 1px solid white;} # tabfirst li. tabin {background-color: # 6E6E6E; border: 1px solid # 6E6E6E;} div. contentfirst {clear: left; background-color: # 6E6E6E; color: white; height: 100px; width: 300px; padding: 10px; display: none;} div. contentin {// display: block; // display: inline; display: inline-block ;}
By testing the display: block; display: inline; and display: inline-block, you can test the differences between the three elements.
 

Q: What are the differences between block inline-block in css?
In this way, we will first talk about inline elements and block-level elements:
Inline elements cannot control width and height, margin, and so on. They are displayed on the same line without line breaks.
Block-level elements can be controlled with width and height, margin, and line breaks.

Inline: After this attribute is used, the element is displayed as an inline element, and the element does not wrap.
Block: When this attribute is used, the element is actually a block-level element, and the element is wrapped in a line break.
Inline-block: indicates that an element is displayed as a block-level element in a row. This means that this element can be displayed in the same line without line breaks, but the height and width can be controlled, which is equivalent to the enhancement of restrained elements.

Note that IE6 does not support inline-block.

What is the difference between display: inline and display: inline-block and display: block?
In short, display: inline is converted to inline elements without line breaks. display: block is converted to block elements and line breaks. display: inline-block is used to inline block elements, the attributes of block elements can be used without line breaks. They are similar to the floating Effect of block elements, but are not supported by browsers of earlier versions.