CSS BOX MODEL

4 min readDec 19, 2022

CSS BOX MODEL ( PADDING, MARGIN, BORDER )

°According to the standard CSS basic box model, when laying out a document the browser’s rendering engine represents each html element as a rectangular box. Every box is composed of four parts defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

content : This property is used to displays the text, images, different elements, that can be sized using the width & height property.
padding : This property is used to create space around the element, inside any defined border.
border : This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
margin : This property is used to create space around the element i.e., around the border area.

The following figure illustrates the box model in CSS-

/ *

Block-level elements- A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”, like <p, <div>, etc.

Inline elements- Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content, like <span>, <img>, etc.

* /

MARGIN & PADDING FOR BLOCK ELEMENTS -

MARGIN & PADDING FOR INLINE ELEMENTS -

♣ Width and Height of an Element -

When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

⫸ Example

This <div> element will have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

⫸ Here is the calculation:-

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

⫸ The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

⫸ The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Example-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EXAMPLE OF CSS BOX MODEL</title>
    <link rel="stylesheet" href="positioningexample.css">
</head>
<body> 

    <h2>Inline Elemnts</h2>

    <span>span tag</span>
    <em>em tag</em>
    <a href="">anchor tag</a>
    <span>span tag</span>

    <h2>Block-level elements</h2>

    <div>div tag</div>
    <div>another div tag</div>
    <h3>h3 tag</h3>
    <p>paragraph tag</p>
    <ul>
        <li>li tag</li>
        <li>another li tag</li>
    </ul>
    
</body>
</html>

span {
display: block;
margin: 20px;
padding: 20px;
}
div{
    display: inline;
    border: 2px solid crimson;
    margin: 20px;
    padding: 20px;
}

Output-

Another example illustrates the Box Model by implementing the various properties-

<!DOCTYPE html>
<head>
    <style>
    .main {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
      
    #box {
        padding-top: 40px;
        width: 400px;
        height: 100px;
        border: 50px solid green;
        margin: 50px;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
    }
    </style>
</head>
  
<body>
    <div class="main">CSS Box-Model Property</div>
    <div id="box">Lokesh from Ineuron</div>
</body>
</html>

CSS BOX MODEL

♣ Width and Height of an Element -

⫸ Example

Written by LOKESH