Box Model - with my Padding & Margin Added


I Deleted the Default Padding, Margin and Borders

flower piece

On this page the padding, margins and borders have all been zeroed out, then I added the amounts of padding and margin I wanted to have to the Elements on my page. This page looks a lot better than the page in Demo 6D.

Remember to 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 Demo 6D - - It looks a bit weird. This page looks much better and is on its way to becoming a nicely laid out page.

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.

As you can see, I added a border to my image. I also added a background color and some padding. Now I not only have a black border, I also have a tan colored inner border (the background color) that shows because I added the padding. It almost looks like a mat on a nicely framed piece of art. YOu can get pretty creative working with the CSS styles for padding, margin and borders.