These are chat archives for codefellows/sea-f1-TAs/Zach

Sep 2014
Ed Abrahamsen
Sep 16 2014 17:35

Hey Zach, In the week 4 quiz there was this problem:

I have a <div> that has the following styles applied to it
width: 300px;
border: 2px solid #a7a7a;
margin: 20px;
padding: 20px;
How wide (in px) is my div?

I answered 384 which came back as wrong. given the box model I believe this is the correct calculation:

300px (width)

  • 40px (left + right padding)
  • 4px (left + right border)
  • 40px (left + right margin)
    = 384px

Why is this wrong?

Zach Bryan
Sep 16 2014 17:40
@esa2 @harberg I am going to paste what nick the TA said he is way better at css than I am and I think his explanation is better than I could do.
So, margin doesn't get factored into the total width of an element. Border and padding do. The div has a width of 300px + 2px of border left + 2px of border right + 20px of padding left + 20 px of padding right. Margin exists outside of the box and isn't added into the total width of the element.
Understanding the Box Model is the corner stone of understanding layout and css. It becomes even more important with % based width in responsive design.
Ed Abrahamsen
Sep 16 2014 17:50

I checked that link and it gives the size of the box in pixels. The question was how wide is the div not the box.

Here are 2 sites I referenced and their answers:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
According to the box model, the total width of an element can be calculated using the following formula:
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Both site explicitly say that the element width includes the padding. For now I still maintain the correct answer is 384px.

Sep 16 2014 18:45
Esa, not sure if you solved your problem yet but when I entered 384 I got a correct response. However, when I initially wrote 384 px I got a wrong response because of the space between the # and "px". Try re submitting your answer like "384" or "384px" with no space.
Ed Abrahamsen
Sep 16 2014 18:53
That's odd. I haven't tried again but when I initially entered 384 with no px or spaces It actually told me the correct answer was 344. I will try it again. Thanks.
Ed Abrahamsen
Sep 16 2014 18:59
Screen Shot 2014-09-16 at 11.57.00 AM.png
Nicholas Harberg
Sep 16 2014 20:40
Question has been updated to hopefully make things more clear. The content area of the div is not effected by margin. Anything is outside of the border in the box model doesn't count when adding the width together. You can do an experiment with your dev tools in chrome. If you highlight and element it will tell you how wide the element is. If you remove the margin or add margin to the element, the width will stay they same. The amount of space that the element takes up will increase, but the content of the element will not change it's width.
"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"