Box Model - with Simple Navigation Added

Exercise 6 Demo 6A Demo 6B Demo 6C Demo 6D Demo 6E Demo 6F All Demos

Think About Page Layout

What Amount of Padding & Margin Works Best?

Adjust Amounts Until You like the Layout

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 can vary by browser. If we have a specific design in mind, allowing the browser to set padding and margin can break the page layout.

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 customize our page layouts.

This is How These Elements Look With the Padding and Margins I Chose

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 readability. 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.