This is the Default Box Model - with Areas Displayed

Header 2

flower piece

Header 3

Header 4


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 by Default

Each of these elements now has a background color added. By doing this we can see the padding that surrounds the elements. The margin is between them.