© 2008. NM Web Tutorials. Nathan Morier
NM Web Tutorials
XHTML
Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX ColoursCSS
Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding BackgroundsOther Useful Tips
Add to Search Engine TermsSimilar to Margins, but I think would best be demonstrated with text:
CSS
What The Code Does
#padded_area {
display:block;
height:100px;
width:180px;
padding:10px 20px 30px 40px
}
Content doesn't touch the edge because of the padding.
Dimensions are fairly important with all your divisions, here is how it works:
1st number: adds to the top.
2nd number: adds to the right.
3rd number: adds to the bottom.
4th number: adds to the left.
Key word being “add”, when you add padding to your display: block;, it will make the division bigger.
Home | Layout | Background Colour | Background Image-Type 1 | Background Image-Type 2 |
| Float | Margins | Padding
© 2008. NM Web Tutorials. Nathan Morier