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.
        * {border: 1px solid blue; margin: 10px}
        body {border: 1px solid red}
        <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>
            <tr><td>data 1</td><td>data 2</td></tr>
            <tr><td>data 3</td><td>data 4</td></tr>
            <li>item 1
            <li>item 2
            <li>item 3
        <blockquote>This is blockquote text</blockquote>
Related Tutorial
Follow Us #
Contents +