Full Height of a HTML Element (Div) Including Border, Padding and Margin

Full height of a html element (div) including border, padding and margin?

If you can use jQuery:

$('#divId').outerHeight(true) // gives with margins.

jQuery docs

For vanilla javascript you need to write a lot more (like always...):

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

​
Live DEMO

code source

HTML element height including margin and children's margin

The reason for that is "margin collapsing". Basically, it combines the two margins of your blocks into one. In your case it only occurs if there is no padding.

The specification is a bit hard to read in my opinion, so you probably find MDN easier!

Padding/Margin/Border On Element Does Not Change DIV Height

your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.

So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.

UPDATE: To answer your comment, here is the solution you might be looking for

Max-height on border-boxed div with padding is not set

The property max-height works on the height of the element and you want to use it on the height and padding-bottom.

I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.

An example:

• The element with content is 100px in height.
• The max-height is set to 50px (element is now 50px in height).
• Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.

JsFiddle example: clicky

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {

  display: block;

  position:absolute;

  height:auto;

  bottom:0;

  top:0;

  left:0;

  right:0;

  margin-top:20px;

  margin-bottom:20px;

  margin-right:80px;

  margin-left:80px;

  background-color: green;

}

<div class="stretchedToMargin">

  Hello, world

</div>

Find element height, including margin

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

this does exactly what jquery's outerwidth is doing, scratched from ::http://youmightnotneedjquery.com/
might be interteresting for further develpoment

EDIT: in ie8 you have to use el.currentStyle[prop] instead of getComputedStyle(el);

Why does padding change the height of the child div with border-box set?

From the specification:

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

..

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
   
   1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
   2. Otherwise, the containing block is formed by the padding edge of the ancestor.

So the position:absolute element will use 400px that include the padding

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

The other one will use the content-box which is 400px - 20px so you won't have the same height

400*0.8 = 320 [positionned element]
(400 - 20)*0.8 = 304 [non-positionned element]

This is somehow logical since padding is a way to create space so it will get removed from the calculation when considering non-positionned elements. This logic is different for positionned element.

An example to illustrate:

.box {
  border:2px solid;
  padding:20px;
  height:300px;
  width:300px;
  box-sizing:border-box;
  position:relative;
}

.box > div:last-child {
   height:100%;
   width:100%;
   background:red;
}

.box > div:first-child {
   position:absolute;
   width:100%;
   height:100%;
   background:rgba(0,255,0,0.5);
}

<div class="box">
  <div></div>
  <div></div>
</div>

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

---

Related Topics