WDI prework

This project is maintained by Milisant

WDI Fundamentals Unit 5

The Box Model

Now that we understand how to differentiate between inline and block elements, it’s time to take a look at the CSS Box Model. Every HTML element on a webpage is in a box, therefore, every element has:

More on the Box Model

In the video above, we mainly discussed how to set shorthand properties for padding values that are the same. However, there will be many cases where you’ll want to set properties that have different values. Here’s how your syntax would look like for different padding values for each side of an HTML element.

div {
	background: #c0dec5;
	padding: 30px 20px 0 15px;

This means that the top padding will be 30px, the right padding is 20px, the bottom padding is 0, and the left padding is 15px. This diagram will help you visualize how this works:


There will also be instances when you want to have the same padding or margin value for your left and right margins, and another value for your top and bottom margins. For example, to set your top and bottom padding to 0 and your left and right padding to 20px, you would set it up like so:

div {
	padding: 0 20px;


Further Reading

Ready to try coding it yourself?