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

阻止

使用前后的新行（display：block;）

占用可用的全宽

<强>内联

仅占用所需的宽度，并且不强制换行（显示：内联;）

Answer 3

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

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

Answer 4

display: block;创建块级元素，而display: inline;创建内嵌级元素。如果您不熟悉css框模型，那么解释差异有点困难，但足以说块级元素会破坏文档的 flow ，而内联元素则不会。< / p>

块级元素的一些示例包括：div，h1，p和hr HTML标记。

内联级别元素的一些示例包括：a，span，strong，em，b和i HTML标记。

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

您可以阅读有关here主题的更多文章。看到这个帖子中的其他几个人引用它，可能值得一读。

Answer 5

以下是比较表

您可以查看examples here.

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 block example

显示：内联块占用尽可能宽的宽度，可以是屏幕尺寸的1％到100％

display inline-block example

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

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

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

Answer 8

阻止元素展开以填充其父级。

内联元素合同足以容纳他们的孩子。

Answer 9

为元素添加背景颜色，您将很好地看到内联与块的区别，正如其他海报所解释的那样。

Answer 10

显示：块 它的行为与'p'标签的行为非常相似，它占据了整个行，​​并且在它浮动之前不会有任何元素。  显示：内联 它只需要使用所需的空间，并允许其他元素与自身对齐。

如果是表单，请使用这些属性，您将更好地理解。

Answer 11

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

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

Answer 12

块元素：元素喜欢div，p，标题是块级别。它们从新行开始并占据父元素的全宽。 内联元素：喜欢b，i，span，img的元素是内联级别。他们从不从新行开始占据内容的宽度。

Answer 13

默认情况下，内联元素不会强制在文档流中开始新的一行。 另一方面，块元素通常会导致换行 你可以参考 this link