Understanding the Box Model : Box model Basics : Box Model HTML CSS TUTORIALS


HTML CSS TUTORIALS » Box Model » Box model Basics »

 

Understanding the Box Model


 

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">

<head>
  <title>Understanding the Box Model</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}

body,h1,p,img,b {
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  padding: 2px;
}

h1,b {
  background-color: #cccccc;
}
</style>
</head>

<body>
<h1>Thinking Inside the Box</h1>
<p class="description"><b>boxes</b></p>
<img src="http://www.navioo.com/style/logo.png" alt="How CSS treats a box" />
<p><b>border</b><BR/><b>padding</b><BR/><BR/><b>margin</b><BR/><BR/></p>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Box Model
» Box model Basics