如何在布尔玛中的标题前创建间距，而不使用内容容器

时间：2019-11-13 21:43:16

标签： css stylesheet bulma

我想通过使用Bulma作为样式表来创建一个简单的html页面。我的期望是，使用标题和文本时有合理的默认间距。尤其是我希望在段落和下一个标题之间留出一定的间隔。 documentation在说

  

当您无法使用所需的CSS类时，或者仅当您想要使用CSS类时   直接使用HTML标记，使用content作为容器。

使用内容容器<div class="content">...</div>，则间距令人满意。但是我的理解是content容器是可选的，并且不需要内容容器也可以实现相同的目的。但是，在下面的示例中，第一段和第二个标题之间没有空格。在没有内容容器的情况下创建这种间距的最佳实践是什么？

<!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中的渲染结果：

enter image description here

2 个答案:

答案 0 :(得分：0)

您可以只使用HTML
标记来换行。

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

答案 1 :(得分：0)

我创建了一个名为“ intexttitle”的类，其上边距为1rem。该新类将添加到您自己的样式表中。

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

相关问题
最新问题