The Structure of CSS Box Model

The Structure of CSS Box Model

When a document is layed out, the browser represents each element as a rectangular box according to CSS basic box model and CSS determines all the properties of a particular element like size, position, and other properties like its color, background, border size, etc.

Everything you see on the web is a rectangle. Every element in its sense a basic shape which is Rectangle. Every element is composed of four areas, which are defined by their facets: the content, padding, margin and border.

Structure of box model

box model
A regular box element of HTML consists of 4 areas: Margin, Padding, Border, Content.

Width - Width of element can be specified explicitly else it will be calculated from content implicitly.
Height - Same as width, height of element also can be specified explicitly else it will be depended on content of that element.
Margin - Margin is the type of spacing, which will be applied outside of element and taken in consideration while calculating the dimensions of the element.
Padding - Same as margin, the padding will be applied inside of the element and taken in consideration while calculating the dimensions of the element.

The level of element

There are three basic levels of an element which are inline, block and inline-block elements.
For a refresher, block-level content is the one that takes all the horizontal space it gets, no matter how much its content actually needs. On the other hand, inline elements are those that take up only the space its content needs and the other weird thing is that it doesn’t respect heights, margins, paddings vertically (margin-top, margin-bottom, padding-top, padding-bottom).

In accordance of these type, we have display properties in CSS. Which decides the display level of a HTML element.
These rules are :

selector {
	display: block;
	display: inline;
        display: inline-block; /** inline but perks of block elements **/
}

So, for block level elements the width will be all an element can get in a viewport and for inline it is solely dependent on the width of content. Let’s have a look with an example.
This is the code that renders screenshot given below:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Box Model</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="box"> </div>
    </body>
</html>

style.css

.box { 
    background: dodgerblue;
}

The html consists of an element with a class name “box”, which is a div and a div element is a logical partition of a webpage, hence it’s a block-level element. That’s why it is taking all of the width available to it.

Block level element behavior in HTML

Block level element behavior in HTML

That’s how it behaves out of the box, so lets try giving it a width and see what happens.
style.css

.box { 
    width: 300px;
}

Block level element with width specified in HTML

Block level element with width specified in HTML

As we can see above, the block level elements respect the width explicitly specified. Here, the element is shrinked to 300px of the width. That was simple!
Now let's explore the inline elements.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Box Model</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <span class="box"> </span>
    </body>
</html>

style.css

.box { 
    background: dodgerblue;
    width: 300px;
    height: 300px;
}

Inline element behaviour in HTML

Inline element behaviour in HTML

As we can see above, the inline elements won’t take up the entire width available. Instead, it will rely on the content to expand, even if width, height, margin values specified explicitly.

Box-sizing property

To refer that box, CSS3 introduced a new property named box-sizing which lets us change how the width of the element is rendered. It supports two different values, content-box and border-box.

Content box is the default one. If you change it to border-box, then the size specified will be the maximum size of that element including border and padding, which is kind of good thing to have.

For instance, let’s take our box. We have specified 300px width to that box. If we are adding 25px of padding on both side, it’s 350px wide. But if we use border-box, then the added width of the box and it’s padding together will be 300px.

In that case, the width of our main content will be 250px and the rest of the 50px will be our padding. And if we change the size of our padding, the width of our content will be changed automatically to make the padding within the specified width.

As you’ve already got the point here, the border-box sizing property can soothe the pain of calculating the width of an element every time we are updating the padding or border.

Measurements

An element in HTML has calculation of dimensions depending on width and height and also on the padding and margin of properties of also. But measurements are also affected by box-sizing property which is discussed above.

The width is calculated like,
Total Width = Margin left + Border left + Padding left + Content Width + Padding right + Border right + Margin right

The height is calculated like,
Total Height = Margin top + Border top + Padding top + Content Height + Padding bottom + Border bottom + Margin bottom