CSS Box Model

5. CSS Box Model

5.2. Listing 5.5.2

The size of the box can be specified using width and height properties. If the width of the element is set to 300px (see Listing 5.5.2), the content will then fit to a 300px width (see Figure 4). The height of the element is adjusted to fit the content. If the height is specified, there is a possibility that the content will overflow especially when the content's height is greater than the specified height of the element. To resolve the problem of overflow, you may increase the height of the element or use the overflow property.

Listing 5.5.2 Box Border Example with a width of 300px added to element


<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
             background-color: lightgrey;
             width: 300px;  /* change in width */
             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 4. Output of Listing 5.5.2 with a width of 300px added to the element

The overflow property will set whether to add a scroll bar to the overflowed content or clip it. The overflow property values include visible (default), hidden (clipped, and the rest is invisible), scroll (clipped, and add scrollbar) and auto (add scroll only when necessary).