显示：内联与显示：块

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

display:inline

和这个：

 display:block

在一个元素上分别使用这些，我得到了相同的结果。

显示：块意味着该元素显示为一个块，因为段落和标题一直是。一个块在其上面和下面有一些空格，并且不允许旁边有HTML元素，除非另外sorting（例如，通过向另一个元素添加浮点数声明）。

display：inline表示该元素在同一行的当前块内部以内联方式显示。只有当它位于两个块之间时，该元素形成一个“匿名块”，然而它具有尽可能小的宽度。

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

块

占用全部可用的宽度，前后有一个新行（display：block;）

一致

只占用需要的宽度，不强制换行（display：inline;）

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

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

display: block; 创build一个块级元素，而display: inline; 创build一个内联级别的元素。如果您不熟悉css box模型，那么解释这种差别有点难，但是足以说block level元素会破坏文档的stream动 ，而inline元素不会。

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

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

就我个人而言，我喜欢将内联元素看作印刷元素。这不完全或技术上是正确的，但大部分内联元素的行为很像文本。

你可以阅读更多关于这个话题的文章。在这个线程中看到其他几个人引用了它，这可能是值得一读的。

显示：块将采取整个行，即没有换行符

显示：内联将只需要确切的空间。

  #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％

显示块示例

显示：内联块占用尽可能多的宽度，它可以是屏幕大小的1％到100％

显示内联块示例

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

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

span默认样式是display：inline block：span不会在新行上开始，只会根据需要占用尽可能多的宽度

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

内联元素的合约只是足够大，可以容纳他们的孩子。

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

Display：block它的行为与'p'标记的行为非常相似，它占用了整行，在浮动之前不能有任何旁边的元素。显示：内联它只是使用尽可能多的空间，并允许其他元素排列在一起。

使用这些属性的情况下，你会得到更好的理解。

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

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

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