为什么我的div容器不能与上面的部分完全对齐？两者之间有一个细边框

Question

enter image description here我正在尝试使用引导程序为此网页布局创建多个部分。我在页面标题的顶部做了一个部分，我有一个带有多张卡片的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元素的底部空白。

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

Answer 2

将您的代码放在Codepen中，看不到任何边框！？

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

请发送屏幕截图