Html 如何为网页添加空间？

我正在尝试制作一个简历网页。我正在使用Bootstrap 4帮助我进行响应性设计。我正在努力解决不同可折叠（div）元素的间距问题

我查了一些学校的资料。我看到我可以使用HTMLBR标记在段落中创建新行。但是，这不会在不同元素之间添加换行符（空格）

这是我的密码

简单可折叠
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。

这里有一些文字

使用引导时，可以使用引导的间距实用程序在需要的地方添加间距

示例：

改变

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">

到

注意我在按钮中添加了

mb-3

类？这就是在它下面增加间距

---

您可以阅读有关引导的间距实用程序的更多信息。

将自定义CSS添加到文档中

<style>
#demo{
     margin-bottom: 20px;
}
</style>

#演示{
边缘底部：20px；
}

首先，学习HTML非常好

我在您的代码中看到的问题：

div#demo用于包装文本。因此，如果您需要文本包装器，应该使用div进行内容布局。使用

p

（block）

span

（inline），还有更多，但它们是基本的

如果您检查，您将看到

p

标记具有您在#demo上缺少的边距

因此，最简单的方法是在第一段前后添加

p

<div id="demo" class="collapse">
  <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Some text here. </p>
<div>

Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。

这里有一些文字

您还可以将空的标记替换为换行符
标记

<div class="container">
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="collapse" 
          data-target="#demo">
    Simple collapsible
  </button>
  <div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <br>
  <p>Some text here. </p>
</div>

简单可折叠
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。


这里有一些文字

我总是使用

。您需要使用一些（大约3或4个）来在元素之间留出空间。

您应该在

#demo

div中添加底部填充或边距。那么使用

是否出于某种原因是错误的？这只是不必要的标记。如果你在任何地方都这样做，你会有一些混乱的代码。使标记尽可能小。请参阅下面我的答案，了解如何使用引导正确地添加间距（通过填充/边距）。您要问的是一个宽泛的主题。简单地引入元素作为另一个换行的解决方法当然是一种选择，但真正进入页面的空间组织本身就是一门艺术。以下是关于该主题的一些轻松阅读：。不包含空元素的另一个原因是当您开始考虑web可访问性时。为了更改显示而添加HTML元素可能会使它们失效，并导致失明/失聪用户无法准确地使用您的站点。使用自定义CSS是一种更好的方法。您可以获得所需的空间，同时保持HTML的干净性和可访问性。

<div class="container">
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="collapse" 
          data-target="#demo">
    Simple collapsible
  </button>
  <div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <br>
  <p>Some text here. </p>
</div>