Geek Answers Handbook

Mysterious addition / margin problem

I have a main div with the class .features, inside this div I have two drawers, each of which has a height equal to 160px and a different width. There is a massive addition between the end of two boxes and the main div, as shown in the screenshot below:

enter image description here

The indentation is approximately 5 pixels - I would like to remove this add-on, if possible. I tried to add margin: 0; and indentation: 0; to the main div, as well as to the two inner boxes, but this did not 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>

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; }
+4
source share
3 answers

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

Example

This is because your internal elements are displayed as inline-block . This means that they are affected by font-size , and ultimately font-size causes the height of the parent to be greater than the height of the internal elements.

There are two fixes:

  • Specify font-size of 0 in the .features element, and then reset inside the internal elements (giving them font-size of 16 or whatever 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 element .features a height of 160px itself 160px that it matches its children. In this case, the browser does not need to calculate what 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>
+7
source

Just make the font-size as 0 for .features and it will take up the entire width. Here is your violin.

 .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>
+1
source

You can also simply disable display: inline-block on both children and set float: left to .list-items and display: table to .features ( code example ). An added benefit that is without a hard-coded parent div height, the parent div will expand to fit the child content.

@james donnelly has already given you an accurate and concise explanation of the reason.

0
source

More articles:


All Articles