CODEWITHSUNDEEP
htmlcssheight
Richard Rodgers
Richard Rodgers

Reputation: 625

Mysterious bottom padding/margin issue

I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:

enter image description here

The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.

Here is the html for this section of the page:

<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

The css:

 .features {
    width: 980px;
    margin: auto;
    margin-top: 25px;
    background-color: lightblue;
}

.list-items {
    width: 280px;
    height: 160px;
    display: inline-block;
    background-color: red;
}

.screenshot-box {
    width: 583px;
    height: 160px;
    float: right;
    padding-bottom: 0;
    display: inline-block;
    background-color: red;
}

Upvotes: 4

Views: 1375

Answers (3)

imnotanelephant
imnotanelephant

Reputation: 862

You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.

@james donnelly has already given you an accurate and concise explanation to the cause.

Upvotes: 0

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  font-size: 0;
  /*Just make font size as 0*/
}
.list-items {
  width: 280px;
  height: 160px;
  display: inline-block;
  background-color: red;
}
.screenshot-box {
  width: 583px;
  height: 160px;
  float: right;
  padding-bottom: 0;
  display: inline-block;
  background-color: red;
}
<div class="features">
  <div class="list-items"></div>
  <div class="screenshot-box"></div>
</div>

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:

Example

This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.

There are two fixes:

  1. Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  font-size: 0;
}

.list-items {
  width: 280px;
  height: 160px;
  display: inline-block;
  background-color: red;
  font-size: 16px;
}

.screenshot-box {
  width: 583px;
  height: 160px;
  float: right;
  padding-bottom: 0;
  display: inline-block;
  background-color: red;
  font-size: 16px;
}
<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

  1. Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  height: 160px;
}

.list-items {
  width: 280px;
  height: 160px;
  display: inline-block;
  background-color: red;
}

.screenshot-box {
  width: 583px;
  height: 160px;
  float: right;
  padding-bottom: 0;
  display: inline-block;
  background-color: red;
}
<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

Upvotes: 8

Related Questions