Box Model - with Padding & Margin Zeroed Out

Header 2

flower piece

Content Crashed to the Left

And Smashes All Together


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 No Padding and No Margin

In the styles of my document, I have zeroed out each of the elements I have used on this page. I still have the background colors in place to use as a visual aid.

Here is an example of how to zero out the padding and margin on a single element in your CSS styles:

h1 {padding: 0; margin: 0}

To see how I zeroed out the padding and margin in my styles, right click on the page and view the page source. Next we can add CSS to make the page have the style we want it to have. Not just the default style. We Zero out the Padding, Margin & Borders on all elements, then add the specific amounts we want to add to individual elements we are using.