如何在不使用内容容器的情况下在 Bulma 中的标题前创建间距

Question

我想创建一个简单的 html 页面，使用 Bulma as stylesheet. My expectation is, that there is a reasonable default spacing when using headlines and text. Expecially I am expecting a spacing between a paragraph and the next headline. The documentation 表示

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container.

有了内容容器<div class="content">...</div>那么间距就令人满意了。但我的理解是 content 容器是可选的，我可以在没有内容容器的情况下实现同样的效果。但是对于以下示例，第一段和第二个标题之间没有 space。在没有内容容器的情况下创建这种间距的最佳做法是什么？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Bulma website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="title is-4">First title</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo. 
          </p>
          <h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

在 firefox 中的渲染结果：

Answer 1

您可以只使用 HTML < br > 标记作为换行符。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Bulma website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="title is-4">First title</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo. 
          </p><br><br>
          <h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Answer 2

我创建了一个名为 'intexttitle' 的 class，其上边距为 1rem。这个新 class 已添加到您自己的样式表中。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Bulma website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
</head>

<body>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h3 class="title is-4">First title</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo. 
          </p>
          <h3 class="intexttitle is-4">Second title - with no spacing to previous paragraph</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
            urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
            finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
            sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

如何在不使用内容容器的情况下在 Bulma 中的标题前创建间距

How to create a spacing before a title in Bulma, without using a content container

css

stylesheet

bulma