What is causing my div containers to have bottom margin?

Question

I have written some simple code using HTML and Bootstrap. Out of nowhere there is margin bottom to div in form of 8, 16 etc.

I tried mentioning div margin in separate stylesheet as 0. Does anyone know why this is happening?

body {
  margin: 0;
}

div {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="sup" class="bg-danger p-4 h1">
  Title
</div>
<div class="bg-dark">
  <ul class="d-flex flex-row justify-content-end list-unstyled">
    <li class="m-3 p-3 bg-light">
      Home
    </li>
    <li class="m-3 p-3 bg-light">
      About
    </li>
    <li class="m-3 p-3 bg-light">
      Products
    </li>
  </ul>
</div>
<div class="bg-warning p-5 h1 d-flex justify-content-between">
  <div class="m-4">
    it will content image
  </div>
  <div class="card m-4" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Contact us</h5>
      <p class="card-text h6"></p>
      <p class="card-text h6">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Contact Now</a>
    </div>
  </div>
</div>

I added custom CSS because of the margin-bottom that was created, which I didn't know how it was created. — rajkumawat, Jul 07 '23 at 15:27

isherwood · Accepted Answer · 2023-07-07T15:36:18.653

You're adding the h1 class to your container divs for some reason. This adds bottom margin. That's an odd use of heading classes, which are intended to be used on heading and other textual elements. Use a heading element instead, which is more appropriate from a semantic standpoint anyway, and apply the class there if desired.

If for some reason you do want the typography class on the div, you can use Bootstrap's m-0 or mb-0 spacing class to remove the margin. No need for custom CSS. Get to know the library a little better so you avoid extra work.

By the way, you can easily deduce this yourself with your browser's document inspector. Simply inspect the div and see that margin is being added by that class. This is a good skill to have.

To remove the gap under the menu, use m-0 on the list element to remove its default margin.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="sup" class="bg-danger p-4">
  <h1 class="h1">Title</h1>
</div>

<div class="bg-dark">
  <ul class="d-flex flex-row justify-content-end list-unstyled m-0">
    <li class="m-3 p-3 bg-light">
      Home
    </li>
    <li class="m-3 p-3 bg-light">
      About
    </li>
    <li class="m-3 p-3 bg-light">
      Products
    </li>
  </ul>
</div>

<div class="bg-warning p-5 d-flex justify-content-between">
  <div class="m-4">
    Will contain image
  </div>

  <div class="card m-4" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Contact us</h5>
      <p class="card-text h6"></p>
      <p class="card-text h6">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Contact Now</a>
    </div>
  </div>
</div>

But, can I know why that margin-bottom was created when by default, it should be 0 for divs? — rajkumawat, Jul 07 '23 at 15:28
I explained that (or at least _implied_ it). The `h1` class adds it. — isherwood, Jul 07 '23 at 15:35

What is causing my div containers to have bottom margin?

1 Answers1