Box Model

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>
Parts of Box

HTML element has associated with box. The box has four parts.

ValuesDescription
contentthe actual of the element
paddingthe area between the content and the border
borderthe edge of the element
marginthe area between the element and similar adjacent elements
Points to Remember
  • The margin is transparent
  • The border has an associated background
  • The padding and the content share the background property defined for the elements.
  • The margin, border and padding have a top, right, bottom, and left sub parts for which you can set individual properties.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +