显示:内联vs显示:块

显示:块 意味着元素显示为一个块,就像段落和标题一直一样。一个块上面和下面都有一些空白,并且不允许它旁边有HTML元素,除非另有顺序(例如,通过向另一个元素添加一个float声明)。

显示:内联 表示元素以内联方式显示在同一行的当前块内。只有当元素位于两个块之间时,元素才会形成一个“匿名块”,但宽度尽可能小。

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

街区

占满可用宽度,前后换行(显示:block;)

内联的

只占用所需的宽度,不强制换行(display:inline;)

display: block -元素前后的断线

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

display: block; 创建一个 块级 元素,而 display: inline; 创建一个 内联级 元素。如果您不熟悉CSS框模型,但足以说明块级元素分解了 流 一个文档,而内联元素没有。

块级元素的一些示例包括: div , h1 , p 和 hr HTML标签。

内联级别元素的一些示例包括: a , span , strong , em , b 和 i HTML标签。

就我个人而言,我喜欢把内联元素看作 排版印刷 元素。这在技术上并不完全正确,但在大多数情况下,内联元素的行为与文本非常相似。

你可以多读一篇关于这个主题的文章。 here . 正如这篇文章中其他几个人所引用的那样,它可能值得一读。

这是一个比较表

您可以在此处查看 示例。

你可以看到 examples here.

显示:块 将采用整条线路,即无断线

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

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

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

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

显示:块

占据整个屏幕行(100%),始终为屏幕大小的100%

display block example

显示:内联块 占用尽可能多的宽度,可以是屏幕大小的1%-100%

display inline-block example

这就是为什么我们 div和跨度

DIV默认样式为显示块:它占用屏幕的整个宽度

span默认样式为display:inline block:span不会从新行开始,只占用所需的宽度。

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

内联的 元素收缩到刚好能容纳他们的孩子。

添加一个背景色到元素,你会很好地看到内联与块的区别,如其他海报所解释的。

显示:块 它的行为与“p”标记非常相似,它占据了整行,并且在浮动之前,它旁边不能有任何元素。 显示:内联 它只使用了所需的空间,并允许其他元素与自身对齐。

在表单中使用这些属性,您将得到更好的理解。

块或内联块可以具有宽度(例如宽度:400px),而内联元素不受宽度影响。内联元素可以跨到下一行文本(例如 http://codepen.io/huijing/pen/PNMxXL 调整浏览器窗口的大小以查看这一点),而块元素不能。

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

块元素 :DIV、P、标题等元素为块级。它们从新行开始,占据父元素的整个宽度。 内联元素 :b、i、span、img等元素是内联级别。它们从不从新行开始,占据内容的宽度。