更改段落之间和段落内部的间距

Posted 2023-03-04

【中文标题】更改段落之间和段落内部的间距

【英文标题】：Changing spacing between paragraphs and inside of paragraphs

【发布时间】：2017-05-06 08:28:59

【问题描述】：

我找到了一个与此类似的主题，但我在 Wordpress 中找不到要更改的特定 CSS。如果你去我的homepage 或blog

我想更改段落内和段落之间的间距。不确定我需要在我的 CSS 中修改哪个元素。

找到.body 的line-height 属性，但这似乎不是我想要的。

【问题讨论】：

你应该修复你的标题，它与内容重叠。

【参考方案1】：

您应该在段落之间为该元素设置margin。在段落内的行之间，您可以使用line-height。例如：

p 
  line-height: 32px;   /* within paragraph */
  margin-bottom: 30px; /* between paragraphs */
  

【讨论】：

非常清晰的答案。我发现登录 Wordpress 时看不到我所做的更新。在 Chrome 中打开一个新的隐身窗口会在我刷新时显示更新。

【参考方案2】：

仅在底部应用边距时，可能会影响您设计的其他方面。我会推荐以下内容。

p 
  line-height: 15px;  
  margin: 15px 0;

在顶部和底部应用边距有助于保持一致。这是我使用的代码。我有一个环绕文本的背景颜色。当仅将段落边距应用到底部时，它使单个段落行突出。将边距应用到顶部和底部会使事情变得更平。

【参考方案3】：

添加 margin-bottom: 30px 可以解决问题，但您也或多或少地锁定了在最后一段下方的下一个元素的间距，也以 30px 间距开始。段落之间的间距可能会匹配段落本身的行高（或接近），这可能与下一种元素的间距不同。

例如，假设您有一个对话框，该对话框的内容区域末尾有一个段落，下一个元素是对话框的页脚区域（带有操作按钮）。如果在对话框的内容和页脚之间产生的边距比预期的要大，您就不必做一些反向的负边距。

p 
    line-height: 32px;

    &:not(:last-child)  
        margin-bottom: 30px;
    


// or space on top with a sibling selector:
p 
    line-height: 30px;

    + p 
        margin-top: 32px;
    

////
// or if your line-height and paragraph spacing is the same:
////
$p-line-height: 30px;

p 
    line-height: $p-line-height;

    &:not(:last-child)  
        margin-bottom: $p-line-height;
    


// w/ space on top:

p 
    line-height: $p-line-height;
    + p 
        margin-top: $p-line-height;