display：inline vs display：block

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

display:inline

还有这个：

display:block

在元素上单独使用它们，我得到相同的结果。

display：block表示该元素显示为一个块，因为段落和标题一直都是。一个块在其上下都有一定的空格，并且不允许在其旁边的HTML元素，除非另有规定（例如，通过向另一个元素添加一个float声明）。

display：inline表示元素在同一行的当前块内以行内显示。仅当元素在两个块之间时，该元素才会形成“匿名块”，但是宽度最小。

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

块

占用可用的全部宽度，并在前后添加新行（display：block;）

排队

仅占用所需的宽度，并且不强制换行（display：inline;）

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

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

这是一个比较表：

您可以在此处查看示例。

display: block;创建一个块级元素，而display: inline;创建一个内联级元素。如果您不熟悉css框模型，则很难解释这种差异，但是足以说出块级元素会破坏文档的流程，而内联元素则不会。

块级元素的一些例子包括：div，h1，p，和hrHTML标签。

联级别元素的一些例子包括：a，span，strong，em，b，和iHTML标签。

就个人而言，我喜欢将内联元素视为印刷元素。这不是完全正确的或技术上正确的，但是在大多数情况下，内联元素的行为确实很像文本。

您可以在此处阅读有关该主题的更多文章。看到该线程中的其他人都引用了它，可能值得一读。

显示：块将占据整行，即不换行

Display：inline将仅占用其所需的确切空间。

 #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：inline-block占用必要的宽度，可以是屏幕尺寸的1％-100％

显示内联块示例

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

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

span默认样式为display：inline block：span不在新行上开始，仅占用必要的宽度

向元素添加背景色，您将很好地看到内联与块的区别，如其他海报所述。

Display：block它的行为与'p'标签几乎相同，并且占据了整行，并且直到它浮动为止，它旁边都没有任何元素。Display：inline它仅使用所需的空间，并允许其他元素与其自身对齐。

在表单的情况下使用这些属性，您将获得更好的理解。

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

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

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

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