当换行符没有按预期工作时，我该如何修复它们？答案

【问题标题】：How do I fix my line breaks when they dont work as intended?当换行符没有按预期工作时，我该如何修复它们？
【发布时间】：2022-10-13 18:28:07
【问题描述】：

我正在尝试创建一个包含固定宽度和高度的 3 段换行符 div，但它会产生一个有趣的结果......

预期结果：

（第 1 段）

（第 2 段）

（第 3 段）

现实：

[大空白]（第1段）

（第 2 段）

（第 3 段）

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

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

【问题讨论】：

空格来自您的班级.parafix 和padding-left 和/或padding-top（取决于您的意思是哪个空格）
巨大的空白仅出现在第一大段中，但我知道为什么它们没有出现在第二和第三段中。
padding 适用于 <div class="parafix">，其中包含 <p> 您可能希望 margin 应用于每个 <p>

标签： html css

【解决方案1】：

问题出在这一行：

padding-top:50px;

你所有的.parafixes 将有一个（大空白）50 像素顶部填充。将其更改为较低（或空）值：

.parafix {
  width: 400px;
  height: 600px;
  margin: 0 auto;
  padding-left: 50px;
  padding-top: 10px; /* Reduce the padding to 10px or to whatever you like. Or remove it completely. */
}

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

【讨论】：