如何修复固定宽高div内段落换行异常（首段前有大空白）

问题情况 #

尝试创建一个固定宽高、包含三个带换行段落的div，但呈现效果不符合预期：

• 预期效果：三个段落依次正常排列
• 实际效果：第一段前出现一大片空白，之后才显示三个段落

相关代码 #

CSS代码

.parafix{
  width:400px;
  height:600px;
  margin: 0 auto;
  padding-left:50px;
  padding-top:50px;
}

HTML代码

<div class="parafix">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis eros, euismod et auctor at, viverra non ipsum. Fusce tempor augue vitae felis bibendum porttitor. Nulla facilisi. Nam eu diam tempus, consectetur nibh tincidunt, consequat urna. Sed fringilla ac ligula vel pretium.</p><br>
  <p>Nulla non libero non quam finibus dictum. Suspendisse non urna laoreet, sodales justo eu, lobortis ligula. Cras finibus turpis eget ex vulputate, eu ultrices turpis aliquam. Phasellus at neque vulputate, iaculis sem a, condimentum urna. Nullam gravida vitae nisl a sollicitudin. Vivamus gravida pharetra faucibus.</p><br>
  <p>Praesent dignissim congue sodales. Sed tempor risus nec vulputate finibus. Mauris interdum nibh non dolor venenatis, quis accumsan ipsum gravida.</p>
</div>

问题原因 #

浏览器默认会给<p>标签设置margin-top样式，再加上父div设置了padding-top:50px，两者叠加后就导致第一段上方出现大片空白。另外，你在<p>标签后添加的<br>属于多余设置，因为<p>本身自带上下外边距，足以实现段落分隔效果。

解决方案 #

方案1：清除<p>标签的默认上边距 #

给.parafix下的<p>标签添加样式，重置默认的上边距，只保留父div的内边距控制顶部位置：

.parafix{
  width:400px;
  height:600px;
  margin: 0 auto;
  padding-left:50px;
  padding-top:50px;
}
.parafix p {
  margin-top: 0;
}

方案2：调整父容器内边距并优化段落结构 #

去掉父div的padding-top，利用<p>标签的默认外边距控制段落间距，同时移除多余的<br>标签：

修改后的CSS

.parafix{
  width:400px;
  height:600px;
  margin: 0 auto;
  padding-left:50px;
  padding-top: 0;
}

修改后的HTML

<div class="parafix">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis eros, euismod et auctor at, viverra non ipsum. Fusce tempor augue vitae felis bibendum porttitor. Nulla facilisi. Nam eu diam tempus, consectetur nibh tincidunt, consequat urna. Sed fringilla ac ligula vel pretium.</p>
  <p>Nulla non libero non quam finibus dictum. Suspendisse non urna laoreet, sodales justo eu, lobortis ligula. Cras finibus turpis eget ex vulputate, eu ultrices turpis aliquam. Phasellus at neque vulputate, iaculis sem a, condimentum urna. Nullam gravida vitae nisl a sollicitudin. Vivamus gravida pharetra faucibus.</p>
  <p>Praesent dignissim congue sodales. Sed tempor risus nec vulputate finibus. Mauris interdum nibh non dolor venenatis, quis accumsan ipsum gravida.</p>
</div>

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