html - 为什么我的 div 容器没有与它上面的部分完全对齐？两者之间有一条细线

Question

enter image description here我正在尝试使用 Bootstrap 为此网页布局创建多个部分。我在页面标题的顶部做了一个部分，我有一个包含多张卡片的 div 容器。我不明白为什么容器和部分之间会出现这个细边框。谁能帮我解决这个问题？

我在下面粘贴了我遇到问题的代码，以防有帮助。谢谢!

实验室团队页面

<section>

<div class="container-fluid" style="background-color: lightgrey; border: none">
  <div class="row justify-content-center">

    <!--Mike's Card -->
     <div class="card m-4" style="width: 18rem;">
         <img src="..." class="card-img-top" alt="...">
         <div class="card-body">
           <h5 class="card-title">Mike</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
           <a href="../team/mike/" class="btn btn-primary">See Mike's Page</a>
         </div>
    </div>

    <!--Carl's Card -->
    <div class="card m-4" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Carl</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="../team/carl/" class="btn btn-primary">See Carl's Page</a>
        </div>
    </div>

    <!--Aidan's Card -->
    <div class="card m-4" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Aidan</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="../team/aidan/" class="btn btn-primary">See Aidan's Page</a>
        </div>
    </div>

  </div> <!--row closing tag -->


</div> <!-- card container closing tag -->

Answer 1

我发现此代码上方部分中的 h1 确实产生了间隙。这是来自 h1 元素上的 margin-bottom。

在 h1 上将 margin-bottom 设置为 0，并添加一些 padding-bottom 来处理落在该行下方的任何小写字母:

<section id="title">
<h1 style="background-color: blue; margin: 0; padding:.5rem;">Aidan's problem page</h1>
</section>

<section>

    <div class="container-fluid" style="background-color: lightgrey; border: none">
      <div class="row justify-content-center">

        <!--Mike's Card -->
         <div class="card m-4" style="width: 18rem;">
             <img src="..." class="card-img-top" alt="...">
             <div class="card-body">
               <h5 class="card-title">Mike</h5>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="../team/mike/" class="btn btn-primary">See Mike's Page</a>
             </div>
        </div>

        <!--Carl's Card -->
        <div class="card m-4" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Carl</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="../team/carl/" class="btn btn-primary">See Carl's Page</a>
            </div>
        </div>

        <!--Aidan's Card -->
        <div class="card m-4" style="width: 18rem;">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Aidan</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="../team/aidan/" class="btn btn-primary">See Aidan's Page</a>
            </div>
        </div>

      </div> <!--row closing tag -->


    </div> <!-- card container closing tag -->
</section>