dcoder2099 · May 9, 2010 16:40
diff --git a/border-width-demo.html b/border-width-demo.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Width Test</title>
  <meta charset="utf-8">
  <style>
  body {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGNJREFUeNrs1DENwDAMRcG0iALfMAwjLFIT8NpG1f3Vyw3WG7vfWuuTa0Tc48hhYWFhtbuqbCe6VN7LY2FhqbzKe3ksLCyVV3ksLCyVV3mVx8LC+mXlq13dbc6Zme9fa48AAwDFKPsBdzTEzgAAAABJRU5ErkJggg==');
  }
  h1 {
    border: solid 1px black;
  }
  div#box1 {
    position: absolute; top: 200px; left: 50px;
    
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    background-color: rgba(255,0,0,0.50);
  }
  div#box2 {
    position: absolute; top: 200px; left: 200px;
    
    margin: 10px;
    padding: 10px;
    border: solid 10px red;
    width: 200px;
    height: 200px;
    background-color: rgba(0,255,0,0.50);
  }
  div#box2a {
    position: absolute; top: 230px; left: 230px;
    background-color: rgba(255,255,255,0.30);
    width: 200px;
    height: 200px;
  }
  div#box3 {
    position: absolute; top: 500px;
    background-color: rgba(255,255,255,0.85);
    padding: 10px;
  }
  </style>
 </head>
 <body>
  <h1>Width Test</h1>
  <p>
    Taken from <a href="http://www.w3.org/TR/css3-box/#blockwidth">http://www.w3.org/TR/css3-box/#blockwidth</a>:
    <blockquote>
      ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + scrollbar width (if any) = width of containing block
    </blockquote>
    There is also a <a href='https://dl.dropbox.com/u/1815122/border-width-demo.html'>publicly hosted version of this page</a>.
  </p>
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="box2a">
  </div>
  <div id="box3">
    <p>
      The box on the left, #box1, is a straight 100x100 div (absolutely-positioned),
      with no margin, border, or padding. Therefore it's width attribute is the
      same as it's containing block.
    </p>
    <p>
      The box on the right, #box2, is 200x200 (also, abs-pos), but has a 10 
      pixel-wide margin, border (red), and padding. The containing block is, 
      therefore, 260x260. The very feint box in the center of #box2 is another 
      div, #box2a, that shows the actual content area of #box2 (200x200).
    </p>
    <p>
      All that is to say that the <code>width</code> attribute specifies the
      width of the content area and the computed width of containing block is
      the sum of all the box's properties (width, padding, border, and margin).
    <hr>
    <h4><em>Postscript…</em></h4>
    <p>
      The background grid for this page is an embedded, base64-encoded PNG.
      I built the grid in Photoshop, but then used a quick Ruby script to 
      convert it to base64:
      <pre><code>  require "base64"
  puts Base64.encode64( File.open('grid_bg.png') { |f| f.read } )</code></pre>
    </p>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Width Test</title>
	<meta charset="utf-8">
	<style>
	body {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGNJREFUeNrs1DENwDAMRcG0iALfMAwjLFIT8NpG1f3Vyw3WG7vfWuuTa0Tc48hhYWFhtbuqbCe6VN7LY2FhqbzKe3ksLCyVV3ksLCyVV3mVx8LC+mXlq13dbc6Zme9fa48AAwDFKPsBdzTEzgAAAABJRU5ErkJggg==');
	}
	h1 {
	border: solid 1px black;
	}
	div#box1 {
	position: absolute; top: 200px; left: 50px;

	margin: 0;
	padding: 0;
	width: 100px;
	height: 100px;
	background-color: rgba(255,0,0,0.50);
	}
	div#box2 {
	position: absolute; top: 200px; left: 200px;

	margin: 10px;
	padding: 10px;
	border: solid 10px red;
	width: 200px;
	height: 200px;
	background-color: rgba(0,255,0,0.50);
	}
	div#box2a {
	position: absolute; top: 230px; left: 230px;
	background-color: rgba(255,255,255,0.30);
	width: 200px;
	height: 200px;
	}
	div#box3 {
	position: absolute; top: 500px;
	background-color: rgba(255,255,255,0.85);
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Width Test</h1>
	<p>
	Taken from <a href="http://www.w3.org/TR/css3-box/#blockwidth">http://www.w3.org/TR/css3-box/#blockwidth</a>:
	<blockquote>
	‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + scrollbar width (if any) = width of containing block
	</blockquote>
	There is also a <a href='https://dl.dropbox.com/u/1815122/border-width-demo.html'>publicly hosted version of this page</a>.
	</p>
	<div id="box1">
	</div>
	<div id="box2">
	</div>
	<div id="box2a">
	</div>
	<div id="box3">
	<p>
	The box on the left, #box1, is a straight 100x100 div (absolutely-positioned),
	with no margin, border, or padding. Therefore it's width attribute is the
	same as it's containing block.
	</p>
	<p>
	The box on the right, #box2, is 200x200 (also, abs-pos), but has a 10
	pixel-wide margin, border (red), and padding. The containing block is,
	therefore, 260x260. The very feint box in the center of #box2 is another
	div, #box2a, that shows the actual content area of #box2 (200x200).
	</p>
	<p>
	All that is to say that the <code>width</code> attribute specifies the
	width of the content area and the computed width of containing block is
	the sum of all the box's properties (width, padding, border, and margin).
	<hr>
	<h4><em>Postscript…</em></h4>
	<p>
	The background grid for this page is an embedded, base64-encoded PNG.
	I built the grid in Photoshop, but then used a quick Ruby script to
	convert it to base64:
	<pre><code> require "base64"
	puts Base64.encode64( File.open('grid_bg.png') { \|f\| f.read } )</code></pre>
	</p>
	</div>
	</body>
	</html>