第一个p标记后没有添加新行

Question

我一直在尝试删除第一个p之后的默认新行，但没有任何成功。第二个p应该在第一个p的下面，但不能在同一行。

span {
float: left;
clear: left;
}

<div id="product-info">
<p><b>Test Test</b></p>
<p>Product Information:</p>
<span>A: Test</span>
<span>B: Test</span>
<span>C: Test</span>
</div>

有人能给点提示吗?

Answer 1

使用单个<p>标记，并使用换行符<br />

标签的自然边距<p>margin-bottom(元素下方)是1em。如果添加

，也可以删除该边距

p {
margin:0;
}

但是如果你喜欢边距，并且只想去掉两行之间的空格…请使用换行符

span {
float: left;
clear: left;
}

<div id="product-info">
<p>
<b>Test Test</b>
<br />
Product Information:
</p>
<span>A: Test</span>
<span>B: Test</span>
<span>C: Test</span>
</div>

作为旁注…<span>被设计为内联。比如

<p> I like the color <span style="color:#FF0000"> red </span> </p>

就是如何使用它的一个例子。对于堆叠的元素，使用<div>标签代替，因为它的显示自然是block，将自然堆叠，而不需要额外的CSS规则:

<div>A: Test</div>
<div>B: Test</div>
<div>C: Test</div>

Answer 2

不是换行符。这是保证金。使用浏览器的文档检查器查看。在Chrome中是这样的:

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
...
}

创建自定义类来删除第一段以下和第二段上方的空白。

然后，如果你想要块级元素，使用块级元素。在21世纪，浮动不是一个好的布局策略。

.no-margin-top {
margin-top: 0;
}
.no-margin-bottom {
margin-bottom: 0;
}

<div id="product-info">
<p class="no-margin-bottom"><b>Test Test</b></p>
<p class="no-margin-top">Product Information:</p>
<div>A: Test</div>
<div>B: Test</div>
<div>C: Test</div>
</div>

Answer 3

删除margin.

span {
float: left;
clear: left;
}
#product-info > p:first-of-type {
margin-bottom: 0;
}
#product-info > p:last-of-type {
margin-top: 0;
}

<div id="product-info">
<p><b>Test Test</b></p>
<p>Product Information:</p>
<span>A: Test</span>
<span>B: Test</span>
<span>C: Test</span>
</div>