I am not able to cut excess white spaces between two divs

Question

I have a problem that although I used padding-bottom:0; in style for the class .title but there are still white spaces between .title and #about_restaurant. May I ask if I want to cut the excess white spaces between two elements what is the best way to solve it?

#about_restaurant {
  background-color: yellow;
  width: 100%;
  height: 240px;
  padding-top: 0;
  display: flex;
  align-items: center;
}

.delivery_image {
  flex: 0 0 auto;
  padding: 1em;
}

.delivery_image img {
  display: block;
  border-radius: 50%;
}

.describe_restaurant {
  float: left;
}

.describe_restaurant h2 {
  flex: 1 1 auto;
  padding: 1em;
}

.title {
  text-align: center;
  background-color: aqua;
  padding-bottom: 0;
}

<div class="container-fluid">
  <div id="About">
    <h2 class="title">About Restaurant</h2>
    <div id="about_restaurant">
      <div class="delivery_image">
        <img src="delivery.jpg" width="250" height="250">
      </div>
      <div class="describe_restaurant">
        <h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
        </h2>
      </div>


    </div>
  </div>
</div>

try margin-bottom:0 ? also you can try to about restaurant margin-top:0 and padding-top:0 if they are static — Met Br, Mar 06 '21 at 08:31
`.delivery-image` also has 1em of padding on all sides so that is contributing too! — Jack Dunleavy, Mar 06 '21 at 08:36

score 0 · Answer 1 · answered Mar 06 '21 at 08:36

0

    .title{
       text-align:center;
       background-color:aqua;
       padding-bottom:0;
       margin-bottom:0;
    }

or :

<h2 class="title" style="margin-bottom:0;">About Restaurant</h2>

answered Mar 06 '21 at 08:36

Met Br

634
5
9

score 0 · Accepted Answer · answered Mar 06 '21 at 10:44

That white space is the default margin of the header (<h2></h2>). you can reset it by using: h2 { margin: 0; } in your css file.

Paddings are the inside spacing of an element. However the white-space is not added in the inside of an element but outside. The outside spacing is called margin. As such, padding: 0; wont help you here.

h2 {
  margin: 0;
}

#about_restaurant {
  background-color: yellow;
  width: 100%;
  height: 240px;
  padding-top: 0;
  display: flex;
  align-items: center;
}

.delivery_image {
  flex: 0 0 auto;
  padding: 1em;
}

.delivery_image img {
  display: block;
  border-radius: 50%;
}

.describe_restaurant {
  float: left;
}

.describe_restaurant h2 {
  flex: 1 1 auto;
  padding: 1em;
}

.title {
  text-align: center;
  background-color: aqua;
  padding-bottom: 0;
}

<div class="container-fluid">
  <div id="About">
    <h2 class="title">About Restaurant</h2>
    <div id="about_restaurant">
      <div class="delivery_image">
        <img src="delivery.jpg" width="250" height="250">
      </div>
      <div class="describe_restaurant">
        <h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
        </h2>
      </div>


    </div>
  </div>
</div>

I am not able to cut excess white spaces between two divs

2 Answers2