This is an Example of a Default Box Model

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

This is How These Elements Look by Default

flower piece

All these tags have no CSS styling. On this page, they might look one way on one browser, and differently on another. Although we can see the spaces between each one, you cannot tell exactly where one element ends and the next begins.

Working with Padding, Margins & Borders

All the block element areas are surrounded by different properties - margins, padding & possibly borders. 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 can be different amounts for each browser. Just as we can use CSS to 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 and they will be more consistent in the different browsers.