Does Box Model calculation include margin or not?

Question

When I look at the actual width and actual height of a box I create, the sizes are confirmed by what I've always known in calculating:

width = border + padding + width of the content
height = border + padding + height of the content

But on w3.org it saying: The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height.

So which is it? I know margins are important to the box model, but it does not affect the box size.

div {
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
}


/*200px + 2px + 10px = 212px */

<div></div>

Answer 1

"Box model" is what @K.Daniek describes above. However, I have the impression that you want to know which of all these parameters are included in the defined width. This depends on the used box-sizing:

The default is content-box: Here everything adds up: width plus borders plus padding make up the visible outside width of the box (if it's made visible by a border and/or background). The margins are extra - the outside distance to the parent element. (there is the special case collapsing margins, which is an extra thing) So the given width includes nothing else.

With border-box, The given width includes the border and the padding. Again, margins are extra/outside.

With padding-box, The given width includes only the padding, but not the borders. And once more, margins are extra/outside, which they are always (in relation to the defined width).

See also the examples below, which all have the same settings for width, border, padding and margin, but the three different box-sizing possibilities:

body {
    background: #fc7;
    margin: 0;
}
#x {/*200px + 2px border + 10px padding = 212px width plus margins */
    box-sizing: content-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #7fc;
}
#y {/*200px = 200px width plus margins */
    box-sizing: border-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #f6f;
}
#z {/*200px + 2px border = 202px width plus margins */
    box-sizing: padding-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #cf9;
}

<div id="x">content-box</div>
<div id="y">border-box</div>
<div id="z">padding-box</div>

Answer 2

Yes, the box-model includes the margin. The box model stands for the four edges forming the body document: the margin area, border area, padding area and content area. The picture at the bottom of my post may be helpful for you.

The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.

The space between the padding and the content edge can be controlled using the padding-top, padding-right, padding-bottom, padding-left and the shorthand padding CSS properties.

The border area extends the padding area to the area containing the borders. It is the area inside the border edge, and its dimensions are the border-box width and the border-box height. This area depends on the size of the border that is defined by the border-width property or the shorthand border.

The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

If you don't want to include the margin area, you can use the box-sizing property.

• box-sizing: border-box will cause the box-model to use only the content, padding and border area.
• box-sizing: content-box will count only the content area without the padding, border and margin area.
• box-sizing: padding-box will use only the content and padding area.

Source: https://css-tricks.com/the-css-box-model/

Answer 3

Margin does effects width

Total width of an element is =width + left padding + right padding + left border + right border + left margin + right margin

Total height of an element= height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Here it would

width=200px+5px(padding-left)+5px(right padding)+2px(margin left)+2px (margin right)+ 1px (border-left) + 1px (border-right)=216px.

check this link http://learn.shayhowe.com/html-css/opening-the-box-model/

Hope this helps

check this code snippet which shows you the total width of a div using javascript

$(document).ready(function(){
  alert($("#div1").outerWidth(true));
});

div {
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">hello</div>

Answer 4

If you look at the code snippet , where I have 3 divs one with no box-sizing property, one with box-sizing as border-box and the 3rd with content-box.

As per MDN on offsetWidth , it is the summation of content + border + padding but not the margin.

So, when the box-sizing is specified as border-box, content width is automatically reduced to share its value for padding and border. In the given example, with box-sizing : border-box and width as 200px, content horizontal length (width) is reduced to 188px to make the content + padding + border as 200px. with content-box, padding and margin are additionally added to the content width 200 and hence we see the width to be 212px.

Basically, when box-sizing is not specified, the default value of box-sizing is inherits and it is content-box.

So, primarily width calculation is dependent on the box-sizing property. offsetWidth is always content + padding + margin, the only thing that differs is content width based on the box-sizing property.

console.log("Inherit Width: " + document.querySelector(".content-div-inherit").offsetWidth + " - $ Width : " + $(".content-div-inherit").width());

console.log("Border Box Width: " + document.querySelector(".content-div-border-box").offsetWidth + " - $ Width : " + $(".content-div-border-box").width());

console.log("Content Box Width: " + document.querySelector(".content-div-content-box").offsetWidth + " - $ Width : " + $(".content-div-content-box").width());

.content-div-inherit {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
}
.content-div-border-box {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: border-box;
}
.content-div-content-box {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: content-box;
}
.container {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content-div-inherit">This element Inherits box sizing Property</div>

  <div class="content-div-border-box">This element has Border Box</div>

  <div class="content-div-content-box">This element has Content Box</div>
</div>