CSS: Box Model


 Author: Dwight VanTuyl
 Created: March 09, 2009
   The LINGUIST List
Box Model: Diagram
Padding
• Distance between the content and the
  border.
• Syntax:
  padding: top right bottom left
• Examples:
  padding:...
Border
• Line between padding and margin around
  content.
• Syntax:
  border: width style color
• Examples:
 border: thin...
Margin
• Distance between the border and other
  elements.
• Transparent background
• Possible negative values
• Syntax:
 ...
Example
Example HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...
Example CSS
.box{
  float: left;
  height: 100px;
  width: 100px;
  padding: 20px 100px 0 50px;
  border: thick double bla...
Upcoming SlideShare
Loading in …5
×

CSS-Tutorial-boxmodel

1,975 views

Published on

Published in: Technology, Education
  • Be the first to comment

CSS-Tutorial-boxmodel

  1. 1. CSS: Box Model Author: Dwight VanTuyl Created: March 09, 2009 The LINGUIST List
  2. 2. Box Model: Diagram
  3. 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. 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. 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. 6. Example
  7. 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. 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; }

×