display:inline-block和display:block有什么区别?

内联块元素:

  • 可以存在于内inline内容中。
  • 具有一些box-model属性: bordersmarginpadding ,但是默认情况下它的尺寸是auto的,即只有其内容的宽度和高度。

如果您想要内联块元素的完美示例,那么元素就是您的最佳选择。

块元素:

  • 具有盒模型属性,但默认情况下其width为100%
  • 不能被inline元素包装

是一个很好的例子。

跨浏览器:
display:inline-block应用于block元素(例如

在IE6和7中不起作用。请参阅:http://www.quirksmode.org/css/di…

display:block表示元素将占据100%的宽度,并将从新行开始。

display:inline-block表示元素将是内联的(不是从新行开始),并且将拉伸以占据内容的宽度。

有关示例,请参考JSFiddle上的以下链接:

CSS显示内联和阻止

块级元素总是从新行开始,并占据可用的全部宽度,即,如果不设置块级元素的高度和宽度,它将占据页面的整个宽度。

块级元素的示例为

内联元素不会从新行开始,而是占用所需的空间。

内联元素的示例是

内联块元素 不是 从新行开始,而是具有块级特征,这意味着我们可以手动设置元素的宽度和高度,并且仍然可以使它们彼此相邻出现。

有关此主题的更多信息,请参考:

div和span:display =’block’,’inline’或’inline-block’吗?