Border-Box solution has incorrect values

[manorfreeman]

This is regarding the solution in:

css-examples/learn/solutions.md

Line 66 in 24f8063

width: 390px;

From task in:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#playing_with_box_models

Very minor nitpick, the answer specifies a width of 390 and height of 240, but I believe that is incorrect. These values appear to include margin in the width/height of the border-box, which should not be included in the border-box size, and so the values should be 350 x 200. Happy to open a PR if it would be accepted.

[chrisdavidmills]

Hi, @manorfreeman.

The given answer looks correct to me.

In the first box, the total width is 300px from the width property, plus 80px from the left and right padding, plus 10px from the left and right border, for a total of 390px. The height is 150px from the height property, plus 80px from the top and bottom padding, plus 10px from the top and bottom border, for a total of 240px.

In the second box, the initial width and height are 300px x 150px. It has the same properties applied to it as the first box, but the box-sizing: border-box declaration applies the alternative box model to the box, which causes the padding and border to be included in the total width and height, rather than added on to them.

This is why to solve the solution you've got to set an explicit width and height of 390px x 240px on the second box to make its total width and height match the total width and height of the first box.

I'm wondering if the explanation needs improvement?