Week 2: Demo

HTML Element Sizing

All HTML elements are made up of four sizing components: its interior width and height, its padding, its border, and its margins. This is what is known as the CSS box model. All of these values ultimately add up to create the true size that the HTML element will take up in the document.

Inspect the HTML element below using the developer tools in your browser (in Chrome or Firefox, right-click on the element and choose "Inspect").

Check this DIV out.

border:gold dashed 10px;

If you scroll down to the bottom of the CSS properties, you should see a diagram of the HTML element's box model similar to the image below.

HTML box model