我怎么知道一个块级元素跨越多行或单行答案

【问题标题】：How can I know a block level element spans multiple lines or sigle line我怎么知道一个块级元素跨越多行或单行
【发布时间】：2017-10-10 15:57:05
【问题描述】：

我是 CSS 新手。我正在阅读有关块级元素的信息。 “div”是块级元素。 “p”也是块级元素。

“浏览器通常会在元素之前和之后使用换行符显示块级元素。您可以将它们可视化为一堆框” 来自https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

但是当使用“div”时，我可以看到它不像“p”或“h1”等其他块级元素那样添加新行。

我的意思是我可以看到以下代码 sn-ps 的不同

<p> Text1</p> 
<p> Text2 </p>

<div> Text1</div> 
<div> Text2 </div>

在第一个代码 sn-p 中，在“p”元素之后添加了一个新行。在第二个代码 sn-p 中，“div”元素后不添加新行。

那么为什么“div”没有添加新行呢？任何人都可以帮助理解这一点吗？

【问题讨论】：

我多次阅读您的帖子，但仍然不明白您的意思。请做一个codepen来解释你的误解。
它应该显示为一个块。分享一些代码作为例子codepen.io/theomjones/pen/OxZrza
我打赌你的意思是边距/填充......
我认为您混淆了默认边距和填充浏览器为具有块级别的不同元素提供的填充
是的，现在我理解了这个概念。我对浏览器用新行添加的默认边距感到困惑。谢谢大家。

标签： html css

【解决方案1】：

没有像 “新行”这样的东西只有应用于 H1 和 P 等元素的默认边距。

想让它们归零？

body, p, h1, h2 /* etc*/ { margin: 0; }

没错。 DIV 没有默认的用户代理边距。

【讨论】：

【解决方案2】：

“我可以看到它不像其他块级元素那样添加新行”

没有换行。只是p 和h1 可能有默认的padding/margin 使其与其他内容分开；

下面的sn-p显示两个p和两个div元素，默认padding和margin

p { background-color: #8ABB55; }

div { background-color: #8BFB55; }

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

现在对于同一个 html，下面的 sn-p 显示两个 p 和两个 divs，这次没有 padding 和 margin 用于 p

p {
  background-color: #8ABB55;
  padding: 0;
  margin: 0;
}

div {
  background-color: #8BFB55;
}

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

您可以看到现在p 与您的默认div 没有什么不同

【讨论】：

【解决方案3】：

换行表示块级元素按照文档的正常流程从下一行开始，这是 div 和 span 之间的区别之一：

通常，块级元素从新行开始，内联元素开始不是。

来自https://www.w3.org/TR/html401/struct/global.html#h-7.5.3

正如其他用户解释的那样，块和其他元素之间不是间隙，空间由边距或填充给出。但是像 div 这样的块级元素，除非设置为显示为 inline-block 或者超出了具有位置或浮动的文档的正常流程，否则会从新行开始。

【讨论】：