Introduction

Every element that can be styled with CSS occupies a rectangular area of the webpage, this can be shown by setting the border property of an element.

Here a thin, solid border is applied to an <i> element:

<i style="border: thin solid;">Hello world!</i>

The result within a web browser window would like this:

If we change the inline element <i> to a block-level element <p>:

<p style="border: thin solid;">Hello world!</p>

The result would look like this:

The following code and it's result shows how the "boxes" of these 2 types of elements get rendered in succession.

<style>
    i { border: thin solid; }
    p { border: thin solid; }
</style>
<i>Hello world!</i>
<i>Hello world!</i>
<i>Hello world!</i>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>

Inline elements flow horizontally and block-level elements flow vertically.

Recall that elements can be nested. Here, an inline element is exclusively nested inside a block-level element with the borders of both elements made visible:

<p style="border: thin solid;">
    <i style="border: thin solid;">
        Hello world!
    </i>
</p>

The result:

The CSS Box Model

There are 3 CSS properties that contribute to the box shaped area that an HTML element occupies: margin, border, and padding. The following code sets the width of each of these components to 1em for all figure elements.

<style>
    figure {
        margin: 1em;
        padding: 1em;
        border: 1em solid;
    }
</style>
<figure>
    Content
</figure>

In the result, the outer space is the margin, the black rectangle is the border, and the inner space between the content and the border is the padding:

For the sake of illustration, compare this colorized version of the above element:

The yellow space

is the element's margin. It is the space that separates the element from other elements.

The blue area

is the element's border. It is a visible box that can be rendered inside the element's margin.

The pink space

is the element's padding. It is the space that lies between the element's border (or margin if the border has not been set) and it's content.

The green area

is the element's content

Margins and Padding

Many block-level HTML elements have default margin values. The <p> element has the following default style:

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

This code shows that it's possible to set different widths for each side of an element's margin, those being: the top, right, bottom, and left margins. The above code is equivalent to the following code:

p {
    display: block;
    margin: 1em 0 1em 0;
}

And the following code is also equivalent:

p {
    display: block;
    margin: 1em 0;
}

Setting the margin property also sets the margin-top, margin-right, margin-bottom, and margin-left properties, in that order if 4 values are specified. If 2 values are specified, the top and bottom margins are equal to the first value and the left and right margins are equal to the second value.

The properties for padding are controlled the same way, one can set the value of padding to set the width of all 4 sides of an element's padding or padding-top, padding-right, padding-bottom, and padding-left can be set manually.

Display types

In CSS, there are 3 common display types that can be set to the display property of an element:

display: inline;

Inline display elements flow horizontally, from left to right, not generating a line break unless the edge of the containing element is reached and wrapping is enabled. The total width of an inline display element is equal to the width of it's content plus the width of any margins or padding it may have on the left or right sides. The height of an inline display element is always defined by the line height of it's container; attempting to apply margins or padding to the top or bottom of an inline display element has no effect. Attempting to set the height and width properties on an inline display element also has no effect. The default display property of elements such as <b>, <i>, <em>, and <strong> are inline.

display: block;

Block display elements flow vertically, from top to bottom, always beginning on a new line and ending on a new line. Block display elements may have margins or padding on any or all sides. The width of a block display element is equal to the width of an entire line by default, but this may be changed by setting the width property; regardless, the element still ends on a new line. The height of a block display element may be greater than the height of a single line if it's content wraps or if it's height property is set to a large enough value. The default display property of elements such as <p>, <h1>, <blockquote>, and <ul> are block.

display: inline-block;

Inline-block display elements flow like inline display elements, but they may also have a width and height like block display elements.

There are 2 generic HTML elements that do not apply any formatting and have no default CSS styling except for their display property:

The <span> element

It's default style is: span { display: inline; }.

The <div> element

It's default style is: div { display: block; }

Boz sizing

The box-sizing property controls how the width and height of an element is calculated:

box-sizing: content-box;

This is the default. The value of an element's width or height property applies to the length of it's content only; the length of it's padding, border, and margins are added afterwards.

box-sizing: border-box;

The value of an element's width or height property applies to the length of it's content, padding, and border; the length of it's margins are added afterwards.

This example displays two bordered elements that have the same value set to their margins, border, padding, width, and height properties; the only difference being that one has a content-box box-sizing and the other has a border-box box-sizing:

<!DOCTYPE html>
<html>
    <head>
        <title>Box sizing example</title>
    </head>
    <body>
        <style>
            .box-sizing-example {
                margin: 0;
                border: 5px solid;
                padding: 5px;
                width: 150px;
                height: 100px;
            }
        </style>
        <div class="box-sizing-example" style="box-sizing: content-box;">
            Total width = 170px<br>
            Total height = 120px
        </div>
        <br>
        <div class="box-sizing-example" style="box-sizing: border-box;">
            Total width = 150px;<br>
            Total height = 100px;
        </div>
    </body>
</html>

The following formulas show how width and height (not including margins) are calculated depending on the box-sizing property:

box-sizing: content-box;

width = content-width.
height = content-height.

box-sizing: border-box;

width = border-left + padding-left + content-width + padding-right + border-right.
height= border-top + padding-top + content-height + padding-bottom + border-bottom.