CSS Box Model

5. CSS Box Model

5.1. Listing 5.5.1

Let's look closely at this example on Listing 5.5.1. The element has a border of 15px, padding of 50px and margin of 20px. Its result should look like in Figure 3. The entire element, expanded in the entire web page with a margin of 20px on all sides. There is also 50px padding that gives space between the border and content.

Listing 5.5.1 Box Border Example


<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                 background-color: lightgrey;
                 border: 15px solid green;
                 padding: 50px;
                 margin: 20px;
            }
        </style>
    </head>
    <body>
        <h2>Demonstrating the Box Model</h2>
        <div>This text is the content of the box. We have added a 50px padding,
        20px margin and a 15px green border. 
        </div>
    </body>
</html>

Figure 3. Output of Listing 5.5.1 Box Model Example