【发布时间】：2011-03-07 03:44:21
【问题描述】：
以下 CSS 的基本区别是什么：
display:inline
还有这个：
display:block
在一个元素上单独使用这些，我得到相同的结果。
【问题讨论】：
标签： css
【发布时间】：2011-03-07 03:44:21
【问题描述】：
默认情况下，内联元素不会强制在文档流中开始新行。 另一方面，块元素通常会导致出现换行符 你可以参考 this link
【讨论】：
-
感谢您的回答。下次请先检查其他答案，因为这不会添加任何新内容。
-
先生，我根据我所知道的知识回答了这个问题，为什么我会看到其他答案并发布我的答案，你是否将这个评论发布给所有回答这个问题的人。这太尴尬了。
您可以查看examples here.
【讨论】：
块元素：像 div、p、标题这样的元素是块级的。它们从新行开始并占据父元素的整个宽度。 内联元素：喜欢 b、i、span、img 的元素是内联级别的。他们从不从新行开始并占据内容的宽度。
【讨论】：
block 元素展开以填充其父元素。
内联元素收缩到刚好足以容纳他们的孩子。
【讨论】：
块或内联块可以有一个宽度（例如宽度：400px），而内联元素不受宽度影响。内联元素可以跨越到下一行文本（例如 http://codepen.io/huijing/pen/PNMxXL 调整浏览器窗口的大小以查看），而块元素不能。
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
【讨论】：
-
这看起来应该是对这个问题的其他八个答案之一的回复。我不知道是哪一个。
-
大部分。只是添加到信息中。
显示：阻止
占据屏幕的整行（100%），它始终是屏幕大小的 100%
display:inline-block 占用尽可能多的宽度，可以是屏幕尺寸的 1% 到 100%
这就是为什么我们有 div 和 span
Div 默认样式是显示块：占据屏幕的整个宽度
span 默认样式是 display:inline block :span 不会从新行开始，只占用必要的宽度
【讨论】：
-
这就是我们有 div 和 span 的原因 - 这个太棒了兄弟 :-)
显示：块 它的行为方式与“p”标签非常相似，它占据了整行，并且在它浮动之前不能有任何元素在它旁边。 显示：内联 它只是根据需要使用尽可能多的空间，并允许其他元素与自身对齐。
在表单的情况下使用这些属性，您将获得更好的理解。
【讨论】：
Display : block 将占据整行，即没有换行符
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/中的例子。
【讨论】：
-
太棒了……这就是我想要的
display: block - 元素前后的换行符
display: inline - 元素前后没有换行符
【讨论】：
display: block; 创建一个 block-level 元素，而 display: inline; 创建一个 inline-level 元素。如果您不熟悉 css 盒模型，则很难解释其中的区别，但可以说块级元素破坏了文档的流，而内联元素则不会。
块级元素的一些示例包括：div、h1、p 和 hr HTML 标记。
内联级元素的一些示例包括：a、span、strong、em、b 和 i HTML 标记。
就个人而言，我喜欢将内联元素视为印刷元素。这在技术上或完全不正确，但在大多数情况下，内联元素的行为确实很像文本。
您可以阅读更多关于主题here 的文章。看到这个帖子中的其他几个人已经引用了它，它可能值得一读。
【讨论】：
display: block 意味着元素显示为一个块，就像段落和标题一样。块的上下都有一些空格，并且不允许其旁边有任何 HTML 元素，除非另有排序（例如，通过向另一个元素添加浮点声明）。
display: inline 表示元素内联显示，在当前块内的同一行。只有当它位于两个块之间时，元素才会形成一个“匿名块”，但它具有最小的宽度。
阅读有关显示选项的更多信息：http://www.quirksmode.org/css/display.html
【讨论】：
-
有没有默认内联的元素？跨度？
为元素添加背景颜色，您会很好地看到内联与块的区别，正如其他海报所解释的那样。
【讨论】：
屏蔽
占据整个可用宽度，前后各换行 (display:block;)
内联
只占用它需要的宽度，并且不强制换行（display:inline;）
【讨论】：