Semantic-UI 段落清除变化

Semantic-UI 是一款流行的 CSS 框架，用于前端网页开发。有时候，我们需要清除文本在段落之间的间距，让它们更紧凑地显示。在 Semantic-UI 中，有几种方法可以实现这一目的：

方法一：使用 .ui.no-margin 类

在段落的外层元素上添加 .ui.no-margin 类，它会去除段落自带的上下边距，使得相邻段落之间的空白更小：

<div class="ui segment">
  <p class="ui no-margin">第一段</p>
  <p class="ui no-margin">第二段</p>
</div>

方法二：使用 .ui.mini 类

在段落的外层元素上添加 .ui.mini 类，它会将段落的字体大小变小，并且去除段落自带的上下边距。这个方法可以在整个网页中都使用，让段落更加紧凑：

p.ui.mini {
  font-size: 0.8em;
  margin: 0px;
}

方法三：使用 .ui.list 类

使用 .ui.list 类，将多个段落放在列表中。这个方法可以用于显示一些简单的信息，让文本更加紧凑：

<div class="ui segment">
  <div class="ui list">
    <div class="item">第一段</div>
    <div class="item">第二段</div>
  </div>
</div>

以上三种方法适用于不同的场景，您可以根据实际需要选择其中一种或多种方法。无论使用哪种方法，都可以让文本更加紧凑地显示，让网页更加美观。

参考链接

• Semantic-UI 官方文档
• stack overflow