2

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>
BeerBeard
  • 83
  • 2
  • 9
  • This answer may help clarify how it works: http://stackoverflow.com/a/39585516/3597276 – Michael Benjamin Oct 17 '16 at 23:24
  • 1
    You can change the box dimension calculation behavior using the `box-sizing` css property. – recursive Oct 17 '16 at 23:28
  • 1
    [This answer](http://stackoverflow.com/questions/39129811/add-border-to-div-increase-div-width/39130170#39130170) might help you to decide between `border-box` and `content-box` properties. – kukkuz Oct 17 '16 at 23:47

4 Answers4

3

"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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • thank you. I was thrown off by CSS-Tricks statement: "Margin is unique in that it doesn't affect the size of the box itself per se, but it affects other content interacting with the box, and thus an important part of the CSS box model" and the w3 definition of box model. So yes! I see what you mean with the box-sizing, and that's the intent of my question: the parameters included in the defined width. So what you are showing is what I'm familiarizing myself with. In other words, margin is included in a box model, but the actual defined width in a calculation won't include margin? – BeerBeard Oct 18 '16 at 00:21
  • Specifically, when I use dev tools and click on the div, it shows me a width of 212px which follows the content-box you have above, so the margin isn't being calculated. So your impression of my confusion I think is spot on. – BeerBeard Oct 18 '16 at 00:31
  • that's what I thought, and that's something I also needed to get used to. And it's the reason for that very often there is a general rule `* { box-sizing: border-box; } which applies to *all* elements. – Johannes Oct 18 '16 at 08:30
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/

enter image description here

kind user
  • 40,029
  • 7
  • 67
  • 77
  • That CSS-tricks link is what brought me here, specifically this sentence: "Margin is unique in that it doesn't affect the size of the box itself per se, but it affects other content interacting with the box, and thus an important part of the CSS box model." When I click on a div I created, it will show me a width of 212px, as in my code above. It's adding the width + padding-left + padding-right + border-left + border-right. I didn't see how margin fit in there. I understand it's important in the box model, but as far as calculating is what threw me off. – BeerBeard Oct 18 '16 at 00:39
  • :( I chose the other because the intent of my question was as he mentioned, "parameters are included in the defined width." I know that margin is in the box model, but my confusion is when I use dev tools and click on the element, it shows me a total width, of 212px; that did not add in margins. I am looking at calculations. The article you linked, plus w3.org, was what brought me here in the first place, specifically this sentence that Coyier wrote: – BeerBeard Oct 19 '16 at 19:58
  • "Margin is unique in that it doesn't affect the size of the box itself per se, but it affects other content interacting with the box, and thus an important part of the CSS box model" and then the calculations itself below it. Your answer is very good, but did not target my specifics. Hope that clarifies my intent :) – BeerBeard Oct 19 '16 at 19:58
  • Also, I do not know what you mean when you mentioned, "If you don't want to include the margin area, you can use the box-sizing property." I never specify the content-box as it's default, yet it still gives me 212px not the added in margin. I am still learning so I am unsure how to render a box that includes margin calculations. Still learning and I appreciate your help. – BeerBeard Oct 19 '16 at 20:02
1

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>
Geeky
  • 7,420
  • 2
  • 24
  • 50
  • Thanks @Geeky for this. Still learning and will read the links sent to me. While I can see margin is important to the box model, what I'm wondering is when I open up dev tools and click on my box element, it will show me a width of 212px not 216px. As in the width rendered isn't calculating in the margin. That's my confusion I think here. I hope I'm making sense. – BeerBeard Oct 18 '16 at 00:28
-1

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>
Sreekanth
  • 3,110
  • 10
  • 22