box model concept

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.
snippet
<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>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +