The CSS box model

by swetareddy

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Box model</title>
</head>
<body>
    <div id="container">
        <div id="box">
            <p></p>
        </div>
    </div>
    
</body>
</html>

CSS

body { background-color: #222; }

#container {
    /* have the #box flush at the edges of the container*/
}

#box {
    /* some colors for reference */
    background-color: #fff;
    /* now let's set some dimensions! */
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 2px solid #aaa;
    outline: #666 solid 50px;
    margin: 50px;
    /* the box is 260px wide according to the browser
       200 + 2(20) + 2(10) = 200 + 40 + 20 = 260px
       by adding up width, padding, and border
    
       visually it takes up 300 pixels,
       add 2(20) for the outline */        
}