This div has 50px of padding and a 30px border that is solid and white,and has a 0px margin

This div has been set to a width of 500px and a height of 300px, but it actually takes up much more space than that on the page. Because of the 50 pixels of padding and 30 pixels of margin, it actually takes up 660px x 460px. You have to add the width of the margin, the width of the border, and the width of the padding. Since there are borders, margins, and padding on both sides, you have to add those twice. For width 500px for the div, 30 pixels for the left border, 30 pixels for the right border, 50 pixels for the left padding, and 50 pixels for the right padding. 500+30+30+50+50=660

This div has a 0px margin, 0px padding, 0px border

It is set to have a width of 500px and a height of 300px. It takes up exactly that much space on the page because it has no margins, borders, or pixels.