Using borders and margins to show off the CSS Box Model.
Contents
A Block Styled Page
You can see how the page looks here.
The Source Code
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<style>
body {
border:5px solid green;
}
h1 {
border:5px solid orange;
margin: 2px;
}
h2 {
border:5px solid aqua;
margin: 2px;
}
p {
border:5px solid yellow;
margin: 2px;
}
li {
border:5px solid silver;
margin: 2px;
}
i {
border:5px solid purple;
margin: 2px;
}
ol {
border:5px solid fuchsia;
margin: 2px;
}
ul {
border:5px solid lime;
margin: 2px;
}
strong {
border:5px solid black;
margin: 2px;
}
mark {
border:5px solid blue;
margin: 2px;
}
a {
border:5px solid red;
margin: 2px;
}
</style>
</head>
<body>
<h1>This is a heading (for testing purposes)</h1>
<p>Paragraphs are the bread and butter of HTML.</p>
<p>They can include <strong>strong</strong> tags.
</p>
<ol>
<li>Lists are cool!</li>
<li>The list things.</li>
<li>This one has an <i>i</i> inside.</li>
<li><p>This one contains a <ul>:</p>
<ul>
<li>Item 1</li>
<li><mark>Marked item</mark></li>
<li>Final item</li>
</ul>
<li><h2>What happens with an h2?</h2></li>
<li>Final order</li>
</ol>
<p>A final paragraph with a dummy
<a href="#">link</a> inside it.</p>
</body>
</html>Notes
- Using the border property (and a bit of extra spacing from the margin property) how the HTML elements stack and nest is much clearer.
- Some elements, like em, i, mark, and a, don’t seem to respect the margin at the top and bottom.
- Some boxes stretch to fit the box they are in and others do not.