Display: inline vs display: block

小开

最佳答案

Display: block 意味着元素以块的形式显示，就像段落和标题一样。一个块在它的上面和下面都有一些空格，并且不允许在它旁边有 HTML 元素，除非有其他顺序(例如，通过向另一个元素添加一个 float 声明)。

Display: inline 意味着元素在同一行的当前块中以内联方式显示。只有当它在两个块之间时，元素才会形成一个“匿名块”，不过这个“匿名块”的宽度是最小的。

小开

布洛克

使用可用的全宽度，前后各有一行(显示: 块;)

插进去

只占用所需的宽度，并且不强制新行(display: inline;)

小开

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

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

小开

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

小开

display: block;创建一个 街区一级元素，而 display: inline;创建一个 内联级别元素。如果您不熟悉 css box 模型，那么很难解释其中的区别，但是可以说，块级元素分解了文档的流动，而内联元素没有。

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

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

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

您可以阅读关于给你主题的更全面的文章。看到这个帖子中的其他几个人引用了它，它可能值得一读。

小开

显示: 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/中引用示例。

小开

展示: 块它的行为与‘ p’标签非常相似，它占据整个行，在浮动之前不能有任何元素在它旁边。显示: 内联它只是根据需要使用尽可能多的空间，并允许其他元素与自身对齐。

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

小开

显示屏

取整行(100%)的屏幕，它总是100% 的屏幕大小

Display: inline-block 占用尽可能多的宽度，它可以是屏幕大小的1%-100%

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

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

Span 默认样式为 display: inline block: span 不从新行开始，只占用必要的宽度

小开

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

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

小开

区块元素 : 像 div、 p 这样的元素，标题是区块级别的。它们从新行开始并占用父元素的全宽。 Inline Elements : 像 b、 i、 span、 img 这样的元素是 Inline level。它们从不从新行开始并占用内容的宽度。

小开

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

Inline 元素收缩到足以容纳其子元素的大小。

小开

下面是一个比较表:

您可以查看例子。