CSS-Tutorial-boxmodel
- 1. CSS: Box Model Author: Dwight VanTuyl Created: March 09, 2009 The LINGUIST List
- 3. Padding • Distance between the content and the border. • Syntax: padding: top right bottom left • Examples: padding: 0 5px 0 10px; padding: 0 0 0 0;
- 4. Border • Line between padding and margin around content. • Syntax: border: width style color • Examples: border: thin solid red border-right: 10px double #FF2032
- 5. Margin • Distance between the border and other elements. • Transparent background • Possible negative values • Syntax: margin: top right bottom left • Examples: margin: 0 -50px 0 10px; margin: 0 0 0 0;
- 6. Example
- 7. Example HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>BoxModel Example01</title> <link rel="stylesheet" type="text/css" href="example01.css" /> </head> <body> <div class="box" style="background-color:red;">BOX 01</div> <div class="box" style="background-color:blue;">BOX 02</div> <br style="clear:both;"/> <div class="box" style="background-color:green;">BOX 03</div> <div class="box" style="background-color:yellow;">BOX 04</div> </body> </html>
- 8. Example CSS .box{ float: left; height: 100px; width: 100px; padding: 20px 100px 0 50px; border: thick double black; margin: 0 30px 20% 2em; font-size: 2em; font-weight: bold; text-align: center; }