如何去除第一个p标签后的默认换行？需保持第二个p位于其下方

首先明确：<p>是块级元素，浏览器默认会给它设置上下外边距（margin-top/margin-bottom），你看到的“默认换行间距”本质就是这个外边距导致的，而两个<p>本身就默认是上下排列、不会处于同一行的，完全符合你的需求，只需要调整间距即可。

以下是几种可行的解决方法：

方法1：重置目标p标签的外边距 #

直接针对#product-info内的<p>标签调整外边距，消除它们之间的间距：

span {
  float: left;
  clear: left;
}

/* 消除p标签的默认上下外边距 */
#product-info p {
  margin: 0;
}

如果只想消除两个<p>之间的间距，保留它们与其他元素的间距，可以更精准地设置：

span {
  float: left;
  clear: left;
}

/* 第一个p的底部外边距设为0 */
#product-info p:first-of-type {
  margin-bottom: 0;
}

/* 第二个p的顶部外边距设为0 */
#product-info p:nth-of-type(2) {
  margin-top: 0;
}

方法2：优化边距合并效果 #

如果需要保留p标签的默认边距，但只想让相邻p的边距正常合并（浏览器默认会合并，但如果有其他样式干扰可手动控制），可以用如下方式确保效果：

span {
  float: left;
  clear: left;
}

#product-info p {
  /* 确保边距正常合并，避免额外间距 */
  margin: 1em 0;
}

修改后，两个<p>会紧密排列在上下两行，不会处于同一行，同时消除了你不需要的默认间距。

内容的提问来源于stack exchange，提问作者IleNea