Box Model - Centered

I Have Added my Own Amounts of Padding & Margin

flower piece

I Left the Background Colors for Now

To Easily See How Much Space Each Component Takes


All the block element areas are surrounded by different properties. Some we can see, such as background-colors and borders. Some are not visible, such as padding and margins. The default amount of space the padding and margin take up is set by each browser. There are different amounts for each one. Just as we can add a background color or a border, we can also use CSS to define the width and height of the padding and margins. By defining these styles, we control or create our page layouts.

This is How These Elements Look With the Padding and Margins Styled

Adding style not only makes your page more pleasing to view, it is also easier on our eyes. We can set the width of the elements, to an easier length for readibility. We can add the spacing we want between elements. You might not want a background color behind your elements on a real webpage, but it makes it much easier to see the changes made through the demo.

Check out the lecture to learn more about the simple navigation and page styles.