Display: differences between inline, block, and inline-block

Display: inline; inline elements are displayed in the same line.
Display: block; block-level elements. In short, there is a line break that will be switched to the second line.
Display: inline-block, which is a block-level element in the same row.

The concept is too vague. Let's use a real case.

<A href = "#" style = "display: inline; width: 100px; Height: 100px; Background: # CCC;"> link 1 & lt; /A> <a href = "#" style = "display: inline; width: 100px; Height: 100px; Background: # CCC;"> link 1 </a>

A is a row by default, so inline is useless here. The width and height settings are also charged.

<A href = "#" style = "display: block; width: 100px; Height: 100px; Background: # CCC;"> link 1 & lt; /A> <a href = "#" style = "display: block; width: 100px; Height: 100px; Background: # CCC;"> link 1 </a>

Block, here the high width takes effect, but because it is block, there is a line break before and after, so this is two lines.

<A href = "#" style = "display: inline-block; width: 100px; Height: 100px; Background: # CCC;" & gt; link 1 </a> <a href = "#" style = "display: inline-block; width: 100px; Height: 100px; Background: # CCC;" & gt; link 1 </a>

In this way, the block is reached at the same time and displayed in the same row.

 

 

Display: block indicates that an element is displayed as a block-level element.

The 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>,

Display: inline is to display the element as a row element.

The 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.

Inline and block can control the high row width of an element. The switchover is as follows:

Start an inline element from a new line;
Keep block elements and other elements on one row;
Controls the width of inline elements (especially useful for navigation bars );
Controls the height of the inline element;
You can set a background color that is the same as the text width for a block element without setting the width.

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.

How can I implement the display: inline-block effect for block elements in IE?

There are two methods:
1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows (... for other omitted attributes ):

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

2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, Zoom: 1 ). The Code is as follows:

Div {display: inline; ZOOM: 1 ;...}

The following is an example to illustrate the differences between the three and their usage.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> display: inline, block, and inline-block </title>
</Head>
<Style>
Div, span {background-color: green; margin: 5px; Border: 1px solid #333; padding: 5px; Height: 52px; color: # FFF ;}
. B {display: block ;}
. I {display: inline ;}
Div. IB {display: inline-block ;}
Div. IB {display: inline ;}
A. IB {display: inline-block ;}
A. IB {display: block ;}
Span. V {padding: 0; margin: 0; Border: 0; Vertical-align: middle; Height: 100%}
</Style>
<Body>
<Div> Div display: block </div>
<Div class = "I"> Div display: inline </div>
<Div class = "IB"> Div display: inline-block </div>
<Span> span display: inline </span>
<SPAN class = "B"> span display: block </span>
<Span> <a class = "IB"> A display: block </a> </span> <br/>
<Div> <SPAN class = "v"> </span> vertical-align: middle </div>
</Body>
</Html>

Display: differences between inline, block, and inline-block