What causes an element to gain an additional 1px of internal height when a border is applied?

Question

What causes an element to gain an additional 1px of internal height when a border is applied?

Have you ever wondered why the apparent visual height of an element inside a border increases by 1 when a border is placed around it? The reported offsetHeight remains the same, equal to the desired height plus the border widths.

This issue becomes especially troublesome when trying to make an inner block element the same height as the outer element. You may notice that in some cases there is an extra 1px of height on the outer element, causing the inner element's background color to not fill the entire container:

#outer { height: 10px; width: 100px; border: 1px solid red; }
#inner { height: 10px; width: 50%; background-color: black; }
/* Setting #inner height to 100% has the same problem. */

<div id="outer"><div id="inner"></div></div>

Some devices may show a one-pixel-high gap between the black background and the red border.

https://i.sstatic.net/zkVkN.png

What causes this discrepancy, and how can you eliminate the "extra" bit of height inside the outer element so that the inner element occupies the full visual height of its container?

Could subpixel rendering be at play here?

Edit: This question isn't specifically about the box model. While understanding the box model, the concern is with the element being rendered with additional height inside its borders. Even Chrome's developer inspector may not display this extra height in its box model, but it's visible on screen.

css

Answer 1

Answer №1

By default, the box-sizing property of an element is set to content-box, which means that the width and height values only apply to the content box of the element.

Changing it to border-box will include the border in the calculation of the width and height as well.

#without,
#with {
  width: 40%;
  float: left;
  display: inline-block;
  margin-left: 2px;
}

#without .inner {
    height: 30px;
    border-bottom: 5px solid green;
    background: yellow;
}

#with .inner {
    height: 30px;
    border-bottom: 5px solid green;
    background: yellow;
    box-sizing: border-box;
}

<div id="without">
  <div class="inner">Without</div>
</div>

<div id="with">
  <div class="inner">With</div>
</div>

Answer 2

By default, the box-sizing property of an element is set to content-box, which means that the width and height values only apply to the content box of the element.

Changing it to border-box will include the border in the calculation of the width and height as well.

#without,
#with {
  width: 40%;
  float: left;
  display: inline-block;
  margin-left: 2px;
}

#without .inner {
    height: 30px;
    border-bottom: 5px solid green;
    background: yellow;
}

#with .inner {
    height: 30px;
    border-bottom: 5px solid green;
    background: yellow;
    box-sizing: border-box;
}

<div id="without">
  <div class="inner">Without</div>
</div>

<div id="with">
  <div class="inner">With</div>
</div>

Answer 3

Answer №2

Web browsers calculate sizes starting with the content and then add padding and border (except for Internet Explorer, but that's a whole other story).

You have the option to change the box-sizing property to inform the browser that when you specify width: 100px, you actually mean "I want a total width of 100px including padding and border."

.outer { height: 50px; border: 10px solid red; }
.inner { height: 50px; width: 50%; background-color: black; }

.border * { box-sizing: border-box; }
.content * { box-sizing: content-box; }

.border, .content {
  margin: 1em 0;
}

<p>Content based</p>
<div class="content">
  <div class="outer"><div class="inner"></div></div>
</div>
<p>Border based</p>
<div class="border">
  <div class="outer"><div class="inner"></div></div>
</div>

When using box-sizing: border-box and both div elements having the same height, the inner one will overflow the outer due to the border being included in the width calculation.

Answer 4

Web browsers calculate sizes starting with the content and then add padding and border (except for Internet Explorer, but that's a whole other story).

You have the option to change the box-sizing property to inform the browser that when you specify width: 100px, you actually mean "I want a total width of 100px including padding and border."

.outer { height: 50px; border: 10px solid red; }
.inner { height: 50px; width: 50%; background-color: black; }

.border * { box-sizing: border-box; }
.content * { box-sizing: content-box; }

.border, .content {
  margin: 1em 0;
}

<p>Content based</p>
<div class="content">
  <div class="outer"><div class="inner"></div></div>
</div>
<p>Border based</p>
<div class="border">
  <div class="outer"><div class="inner"></div></div>
</div>

When using box-sizing: border-box and both div elements having the same height, the inner one will overflow the outer due to the border being included in the width calculation.

What causes an element to gain an additional 1px of internal height when a border is applied?

Answer №1

Answer №2

Similar questions

How to center align SVG with text in a unique way

Attempting to implement a secondary level of dropdown menu using CSS

What is the best way to conceal floated elements with overflow in CSS?

The calendar on the Datetimepicker is not appearing in the proper position

Sliding list in Jquery Mobile

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Guide to Designing a Three-Column Layout Using Only CSS

Creating interactive and adaptable maps

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

How can I modify the CSS of every fourth element using jQuery?

What is the best way to retrieve the color of a WebElement when dealing with a complex CSS structure in Webdriver

Can you explain the meaning of 1__qem?

Using FlexBox for Vertical Alignment of Elements

Finding out the exact number of pixels a user will scroll when using the mouse wheel in Javascript

When hovering over items in the navigation bar, the entire bar expands seamlessly

Resizing the width to fit truncated content

Constructing markup for text and subtext in a meaningful manner

What is the best way to incorporate TypeScript variables into CSS files?

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX