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

Question

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

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

                Labs Team Page                

<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，并添加一些填充-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 -->

​

请发送截图