详解display:inline | block |inline-block的区别

日期：2013-12-16  来源：攀枝花惠康网络公司

display:block就是将元素显示为块级元素.

block元素的特点是：
高度，行高以及顶和底边距都可节制；
宽度缺省是它的容器的100%，除风扇定一个宽度

display:inline就是将元素显示为行内元素.

inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不成改变；
宽度就是它的文字或图片的宽度，不成改变。

IE下块元素若何实现display:inline-block的效不美观？

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline和block可以节制一个元素的行宽高档特征，需要切换的情形如下：

有两种体例：

让一个inline元素年夜新行起头；
节制inline元素的宽度（对导航条出格有用）；
节制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的布景色。

display:inline-block将对象呈递为内联对象，可是对象的内容作为块对象呈递。旁边的内联对象会被呈递在统一行内，许可空格。

inline-block的元素特点：

将对象呈递为内联对象，可是对象的内容作为块对象呈递。旁边的内联对象会被呈递在统一行内，许可空格。(切确地说，应用此特征的元素呈现为内联对象，四周元素连结在统一行，但可以设置宽度和高度地块元素的属性)

让块元素和其他元素连结在一行上；
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

并不是所有浏览器都撑持此属性，今朝撑持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识此外，但使用display:inline-block在IE下会触发layout，年夜而使内联元素拥有了display:inline-block属性的表症。年夜膳缦沔的这个剖析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效不美观。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行结构，所以触发后，块元素依然仍是行结构，而不会如Opera中块元素呈递为内联对象。

1、先使用display:inline-block属性触发块元素，然后再界说display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有用不美观，这是IE的一个经典bug，如不美观先界说了display:inline-block，然后再将display设回inline或block，layout不会消逝踪）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;…}
老是在新行上起头；
div {display:inline;}

小猪之家:display: inline 、block 、inline-block

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

div {display:inline; zoom:1;…}

<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><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>
[Ctrl+A 全数选择进行拷贝 提醒：可先改削部门代码，再点击运行]

以下用个例子来声名三者的区别和用法:

参考:

Blank:display:inline-block的深切理解