display:inline vs display:block

Question

以下CSS之间的基本区别是什么:

display:inline

还有这个:

display:block

在元素上单独使用这些,我得到相同的结果.

Answer 1

display:block表示元素显示为块,因为段落和标题始终如此.块在其上方和下方都有一些空格,并且不允许旁边没有HTML元素,除非另有命令(例如,通过向另一个元素添加浮动声明).

display:inline表示元素在同一行的当前块内部显示为内联.只有当它在两个块之间时,该元素才会形成一个"匿名块",但它具有尽可能小的宽度.

阅读有关显示选项的更多信息:http://www.quirksmode.org/css/display.html

Answer 2

块

占用可用的全宽,前后有一个新行(显示:块;)

排队

仅占用所需宽度,并且不强制换行(显示:内联;)

Answer 3

display: block - 元素前后的换行符

display: inline - 元素之前或之后没有换行符

Answer 4

这是一张比较表

您可以在此处查看示例.

Answer 5

display: block;创建块级元素,同时display: inline;创建内联级元素.如果您不熟悉css框模型,那么解释差异有点困难,但足以说块级元素会破坏文档流,而内联元素则不然.

块级元素的一些例子包括:div,h1,p,和hrHTML标签.

联级别元素的一些例子包括:a,span,strong,em,b,和iHTML标签.

就个人而言,我喜欢将内联元素视为排版元素.这在技术上并不完全正确,但对于大多数情况来说,内联元素的行为与文本非常相似.

您可以在此处阅读有关该主题的更多文章.看到这个帖子中的其他几个人引用它,它可能值得一读.

Answer 6

显示:块将占据整条线,即没有换行符

显示:内联将只占用它所需的精确空间.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

你可以参考这个小提琴http://jsfiddle.net/RJXZM/1/中的例子.

Answer 7

显示:块

占据屏幕的整行(100%),它始终是屏幕尺寸的100%

显示块示例

display:inline-block占用尽可能宽的宽度,可以是屏幕大小的1%到100%

显示内联块示例

这就是为什么我们有div和span

Div默认样式是显示块:它占据屏幕的整个宽度

span默认样式显示:内联块:span不在新行上开始,只占用所需的宽度

Answer 8

块元素展开以填充其父元素。

内联元素必须足够大以容纳孩子。