WDI Fundamentals

WDI Fundamentals Unit 4

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:

  • The content within the box
  • The padding, or the area outside of the content
  • The border, or the line between padding and margin
  • The margin, or the area outside the border that separates the element from other elements on the page.

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: 2em 3em 0 3em;
}

This means that the top padding will be 2em, the right padding is 3em, the bottom padding is 0, and the left padding is 3em. 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 20% of an em, you would set it up like so:

div {
    padding: 0 .2em;
}

Checkpoint

  • How would you set a solid border of red that's 4px for a p element?
  • How would you center a wrapper for your website?

Further Reading


Ready to try coding it out yourself?