Question

我是css的新手。我正在阅读有关块级元素的内容。 “div”是块级元素。 “p”也是块级元素。

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

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

我的意思是我可以看到以下代码片段的差异

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

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

在第一个代码段中，在“p”元素之后添加一个新行。在第二个代码段中，“div”元素后面没有添加新行。

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

Answer 1

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

想要将它们归零？

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

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

Answer 2

＆＃34;我可以看到它不会像其他块级元素那样添加新行＆＃34;

没有换行。只是p和h1可能有默认padding / margin，这使得它与其他内容分开;

以下代码段显示两个p和两个div元素，默认为padding和margin

＆＃13;

p { background-color: #8ABB55; }

div { background-color: #8BFB55; }

＆＃13;

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

＆＃13;

现在，对于相同的html，以下代码段会显示p的两个divs和两个padding，margin和p

＆＃13;

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

＆＃13;

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

＆＃13;

您现在可以看到p与默认div

没有区别

Answer 3

换行意味着块级元素在文档正常流程之后的下一行开始，这是例如div和span之间的差异之一：

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

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

正如其他用户所解释的那样，它与块和其他元素之间没有差距，空间由边距或填充给出。但是像div这样的块级元素，除非被设置为显示为内联块或者不在具有位置或浮动的文档的正常流程中，而是以新行开始。

我如何知道块级元素跨越多行或符号行

3 个答案: