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.
- width and height: these are set as pixel values, percentages, or vw/vh values (we'll learn more about those later in the course).
- padding: this is the spacing that gets added inside of an element, so the background color will appear to fill more space than the interior content if the padding is more than a pixel. This can also be specified in pixels, percentages, and vw/vh.
- border: this is the area directly around the HTML element which can be colored and styled, and in order to be visible must have a width. The width can be specified in pixels, percentage, or vw/vh.
- margin: this is the spacing around the outside of the HTML element, effectively pushing other content away from its edges depending on the value specified in pixels, percentages, or vw/vh.
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.
width:400px; height:100px; padding:20px; border:gold dashed 10px; margin:30px; background-color:red;
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.
