The main concept in rendering a web page is the box concept. Each element of a web page generates a box. Boxes can be nested and have rendering properties determined by the HTML file from which they are generated.
The boxes model organizes the HTML elements(boxes) into a tree(document tree). The root element doesn't have a parent and has only a single child: the <body> element. The leaves of the tree are simple fragments of text that do not have any children.
<html>
<head>
<style>
* {border: 1px solid blue; margin: 10px}
body {border: 1px solid red}
</style>
</head>
<body>
<form>
<h2>This is a heading</h2>
<p>This is a paragraph text</p>
<span>This is a span text</span>
<i>This is a italic text</i>
<table>
<tr><td>data 1</td><td>data 2</td></tr>
<tr><td>data 3</td><td>data 4</td></tr>
</table>
<ul>
<li>item 1
<li>item 2
<li>item 3
</ul>
<blockquote>This is blockquote text</blockquote>
</form>
</body>
</html>HTML element has associated with box. The box has four parts.
| Values | Description |
|---|---|
content | the actual of the element |
padding | the area between the content and the border |
border | the edge of the element |
margin | the area between the element and similar adjacent elements |
