Box Model - with Padding & Margin Zeroed Out


The Padding and Margin are now All Gone

flower piece

On this page the padding, margins and borders have all been zeroed out so the content squashes together and off to the left.

Use this CSS coding to zero out all padding, margins and borders:

* {padding: 0; margin: 0; border: 0;}

Add the CSS code at the top of your Document styles on each page or on an external style sheet. Once you add this you will have to add padding and margin back in or your page will look like this one - - It looks a bit weird.

Remember, to see how I used this code, right click on this page and choose VIEW PAGE SOURCE. The coding will appear and you can see what I wrote.

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.