This Box Model has Background Colors Added


The Padding and Margin are Still the Default Amount

flower piece

By adding background colors to the various elements, we can now see where one ends and the other begins. The space between is the natural or default margins. The little bit of space around the content but within the background color, is the natural or default padding.

Working with Padding, Margins & Borders Helps Make Consistent Page Layouts

All the block element areas are surrounded by different properties - margins, padding & sometimes 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.