Box Model Demonstration : CSS Basics « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. CSS Basics

Box Model Demonstration

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Demonstration of the Box Model</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body, h1, p {
  border:solid 2px #000000;
  padding:5px; 
  margin:4px;
  font-family:arial, verdana, sans-serif;}

b, em {
  border:solid 2px #999999;
  padding:2px;
  margin:23px;}
</style>

</head>

<body>
  <h1>Box Model Demonstration</h1>
  <p>Each element is treated as if it lives in its own <b>box</b>.</p>
  <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p>
</body>
</html>








Related examples in the same category

1.Using Whitespace in CSS
2.Cascaded
3.css box model
4.HTML and CSS coding for inline-block elements
5.CSS Text Properties Example
6.Zero page gutter
7.Inline HTML elements include markup for explicit semantic purposes:
8.CSS can be used to control the presentation of an XHTML document
9.Width and height
10.Default Styles
11.horizontally stretching content
12.stretching content
13.Box model properties are always specified in order clockwise.
14.vertically stretching content
15.Update text color when mouse hover
16.Whitespace and Chunking
17.Multiple Columns