Display:block is the display of elements as block-level elements.
The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<div>, <p>,
Display:inline is to display elements as inline elements.
The features of the inline element are:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it 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 and need to switch to the following conditions:
Let an inline element start from the new line;
Keep The block elements and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Controls the height of the inline element;
You can set the background color of a block element to the same width as the text without having to set a width.
Display:inline-block objects are presented as inline objects, but the contents of the objects are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.
Elements of the Inline-block feature:
Renders an object as an inline object, but the contents of the object are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces. (accurately, the elements that apply this attribute are rendered as inline objects, the surrounding elements remain on the same line, but you can set the properties of the width and height parcel elements)
Not all browsers support this property, currently supported browsers are: Opera, safari in IE the use of inline elements Display:inline-block,ie is not known, but using display: Inline-block in IE will trigger layout, so that inline elements have the Display:inline-block attribute of the table disease. From the above analysis, it is not difficult to understand why ie, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as the block elements in opera as an inline object.
How does the IE block element realize the Display:inline-block effect?
There are two ways of doing this:
1, first use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations to have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted):
div {display:inline-block; ...}
div {display:inline;}
2. Set the block element directly to inline object presentation (set property display:inline), then trigger the layout of the block element (e.g. zoom:1, etc.). The code is as follows:
div {display:inline; zoom:1; ...}
Here is an example to illustrate the difference between the three
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
The difference between <title>display:inline, block and Inline-block </title>
<style>
div,span{margin:5px;border:1px Solid #333;p adding: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>
The difference between display:inline, block and Inline-block
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
