THE BOX MODEL.

The box model is a fundamental principle that every web designer/web developer should understand and be able to implement properly. Without a proper understanding of the box model, building complex web pages would be strenuous which is caused by having to deal with a lot of CSS bugs.

In this article, I will be explaining the box model with a box that is extrinsically sized (more on this later). Extrinsic sizing is the default sizing of every HTML element and it is done by setting the box-sizing property to content-box.

*{
    box-sizing: content-box;
}

What is the CSS box model?

Every element on the webpage from a paragraph, an image, and a heading to an element with rounded corners all live inside a box. Of course, this box can sometimes be invisible nevertheless, it is this box that determines how this element appears on the web page.
So what's the box model? The box model is a term used to describe the various properties of a CSS box. These properties are :

1. The Content Box
2. The Padding Box
3. The Border Box
4. The Margin Box

The Content Box

The Content box is the innermost part of the box. It holds the main HTML content to be displayed on the webpage e.g text, an image, or a video player.
The width and height of this box are determined by the content's width and height respectively and can be controlled using the width and height.

div {
    width: 120px;
    height: 75px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From our result, our content here would be the text "Content Box" and the content's width and height value would be the values of the set width and height. The remaining properties were used to design the content by increasing its's size with font-size, setting the type to font-family with a color, and giving the content box a background-color so that it is visible.

Note: In some cases, if the box was used for simply designing the webpage the content box can be empty.

The Padding Box

This is the whitespace that wraps the content box. It could also be seen as the space between the content box and the border box.
Its default value for most browsers is 0px and since it just acts like whitespace it does not have any color.
The padding property controls the padding on all sides of the element and is a shorthand for the following properties:

1. padding-top: controls the padding space above the element.
2. padding-right: controls the padding space on the right side of an element.
3. padding-bottom: controls the padding space on the bottom of the element.
4. padding-left: controls the padding space on the left side of the element.

The padding property can take either one, two, three, or four values.

• One value controls the value of the padding space on all four sides.
• With Two values the first value controls the padding-top and padding-bottom.
• With Three values the first value controls the padding-top , the second value controls the padding-left and padding-right while the third value controls the padding-bottom.
• With Four values, the first, second, third and fourth value controls the padding-top, padding-right, padding-bottom and padding-left respectively.

To define the padding of any element we could write:

.element {
    padding-top : 20px;
    padding-right : 30px;
    padding-left : 30px;
    padding-bottom : 10px;
}

OR using the shorthand format

.element {
    padding : 20px 30px 10px;
}

To define the padding of our div element, we would write

div {
    width: 120px;
    height: 75px;
    padding : 10px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From the above result we can see that the padding space on all the sides of the div element has increased by 10px and since we are working with an Extrinsically sized box, this increases the width and height of this element.

To calculate the new width and height of our element we would do this :

• New width = padding-left + width + padding-right
• New height = padding-top + height + padding-bottom

OUTPUT:

You would also notice that space has been added to the top and left side of our element to make it look like it has shifted diagonally.

Note: Padding does not take negative and color values. The color here was used to illustrate how its value affects the size of any element.

The Border Box

This box covers the padding box and the content box. The border property controls the borders on all sides of the element. To apply the border to an element, the border property requires three inputs which are :

1. border-width
2. border-style
3. border-color

Border-width

The border-width specifies the thickness of the border. Its value could be thin, medium, thick, and a < length> The more its value is increased the more the width of the element increases. To control the border-width element, the following properties are used :

• border-top-width : controls the on top of the element.
• border-left-width : controls the width on the left side of the element.
• border-bottom-width : controls the width at the bottom of the element.
• border-right-width : controls the width on the right side of the element.

Border-style

The border-style specifies the kind of styling the border's element will have. Its value can be:

• solid: displays a single, straight and solid line.
• dotted: displays a series of rounded dots.
• dashed: displays a series of short square-ended dashes or line segments.
• double: displays two straight lines.
• groove: displays a border with a carved appearance.
• ridge: displays a border with an extruded appearance.
• none : displays no border.
• ridge: displays a border with an extruded appearance.
• outset: displays a border that makes the element embossed.
• inset: displays a border that makes the element appear embedded.

Border-color

The value the border-color takes would be the color of the border.
e.g red, #a79b9b, rgb(135, 187, 87) e.t.c.

To define the border of any element, we could write :

.element {
    border-width : 20px;
    border-style : solid;
    border-color: brown;
}

OR using the shorthand format

.element {
    border : 20px solid brown;
}

Here is how we define the border for our div element

div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border: 10px solid #7380ec;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

When we add a border to an Extrinsically sized box/element we also increase the width and height of the box.

• New width = border-left-width + padding-left + width + padding-right + border=right-width
• New height = border-top-width+ padding-top + height + padding-bottom + border-bottom-width

The Margin Box

This is the outermost part of the element. This part of the box model separates the element from the rest of its surroundings. It's default value is 8px. The margin property controls the margins on all sides of the element.

The margin property can take both negative and positive values. We know that when the margin increases, the separation of the element from other elements increases as well, but what happens when the margin value starts becoming negative? What happens is that the element starts drawing every element around it to itself (you could think of it as a black hole).

To control the margin on each side of the box the following properties are used :

• margin-top: This property Increases the space between the element and its environment at the top. You could think of this property as pushing the element down to create more space above itself. When its value is negative it does the opposite, which is, that it pushes the element upwards by creating below it.
• margin-right: Increasing the value of this property pushes the element to the left by increasing the space between itself and other elements towards the right. Rather than pushing the element to the left, decreasing the margin-right value pushes the element to the right by creating space in the opposite direction.
• margin-bottom: Increasing the value of this property pushes every element below it downwards, and as a child element, it increases the size of its parent element. By doing this, it creates more space between itself and the other elements below it. As a child element, decreasing the margin-bottom value to a negative value would decrease the size of its parent element. This would cause the element to overlap with other elements ultimately leading to an unstructured layout.
• margin-left: As the value of this property is increased the element shifts to the right which is caused by the increase in the space between the element's left side and its environment. As a child element if the margin-left property has a very large positive value it could cause the element to break out of the parent element from the right resulting in an unstructured layout. When the margin-left value is decreased to a negative number it shifts the element to the left causing it to behave like margin-right.

The margin property can take either one, two, three, or four values.

• One value controls the value of the margin space on all four sides.
• With Two values the first value controls the margin-top and margin-bottom.
• With Three values the first value controls the margin-top , the second value controls the margin-left and margin-right while the third value controls the margin-bottom.
• With Four values, the first, second, third and fourth value controls the margin-top, margin-right, margin-bottom and margin-left respectively.

Having a margin with a negative value becomes necessary when its parent element is the body of the DOM.

To define the margin of any element we could write :

.element{
    margin-top :10px;
    margin-right : 7px;
    margin-bottom : 10px;
    margin-left : 7px;
}

OR using the shorthand

.element{
    margin : 10px 7px;
}

Let's define the border of our div element

div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border 10px solid #7380ec;
    margin : 30px;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

OUTPUT:

From our result, we can see that the div element was shifted 30px to the right and 30px downwards.

Note: Margin does not increase the width or height of any element but in some cases, could affect the height and width of its parent element if the height and width of its parent element are not defined.

Intrinsic sizing vs. Extrinsic sizing

When increasing the border or padding of a box we expect that the width and height of the box should increase but developers can still maintain the specified width of the box. This type of sizing is called Intrinsic Box Sizing. To activate intrinsic sizing for all elements in your stylesheet simply add this block of code.

* {
    box-sizing : border-box;
}

Most developers use Intrinsic sizing to keep the size of the element consistent even when padding and border are applied.

Here is what our div element would look like if it was Intrinsically sized.

From the image above, we see that the width (120px) does not change after padding and border were added. What happened here is that the padding and the border start filling the space of the content box rather than adding to it as in the case of Extrinsic-sizing.

Let's say you were creating a menu bar for a phone of 390px.

To shift the content away from the edge of the menu bar you have the option of only using the padding.

If you applied extrinsic sizing the content would move away from the box but the width of the box would increase resulting in an unstructured layout.

The case would be different if Intrinsic sizing was applied. Rather than adding unnecessary width. It just adds the padding without increasing the width.

Fallbacks

Intrinsic Sizing sounds nice but something strange occurs when the size of our paddingbecomes greater than the width of our element.

div{
    box-sizing: border-box;
    width: 120px;
    height: 75px; 
    font-size: 15px;
    padding: 86px !important;
    margin: 30px;
    border: 10px solid #7380ec;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}

The applied padding fills the whole content box and since it is greater than the width it increases the size of the box.

Conclusion

In this article you have understood :

• What is the box model is.
• The differences between each component of the box model and how they affect the way elements are rendered on the webpage.
• How to implement the box model in the short-hand form.
• The differences between Intrinsic and Extrinsic sizing.

Comments

[Andrew Baisden]

You covered the box model well in this article.