CSS Border Box
CSS is all about presentation. Discover how CSS Border Box works to transform plain HTML into a premium user experience in the guide below.
In CSS, there are various properties that you can apply to your web page to make it look appealing. Each CSS property has its value that describes how a web page element should look. Before knowing about CSS Border Box, let us know about the CSS Box Model.
Understanding the CSS Box Model
To understand the border box properly, we must know about the CSS box model. The CSS box model plays an important role in web design, which is used to determine the size and arrangement of elements on a webpage.
The CSS box model comprises of content, margins, borders, and padding. The visual representation of the box model is illustrated below:
One area for enhancement within the box model involves the correlation between the width and its border and padding, as well as the connection between the height and its border and padding.
When dimensions like width and height are defined for an element, they are initially set for the content box. This box serves as the container for the element's content, such as images or text. Adding padding and borders to an element will expand its overall size, potentially causing unanticipated outcomes.
If you define a width of 100 pixels along with a padding of 25 pixels, the element will effectively render as 150 pixels in width, resulting in an expansion in the element's overall size.
Border Box
A border-box setting is utilized to enclose both padding and a border within the total width and height of an element.
Let's explore the method for determining the ultimate size of an element using an illustration:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<style>
.border-box {
width: 100px;
height: 50px;
padding: 25px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="border-box">Some text</div>
</body>
</html>
In the provided code, there exists a div container with the class "border-box". This container is defined with a width of 100 pixels, a height of 50 pixels, padding of 25 pixels, and a border of 2 pixels.
Output:
The actual height of an element is calculated by adding the height value to the top border, bottom border, top padding, and bottom padding.
= 50px + 2px + 2px + 25px + 25px
=104px
The actual width is calculated by adding the width to the right border, left border, right padding, and left padding.
= 100px + 2px + 2px + 25px + 25px
=154px
After incorporating padding and border, the effective height extends to 106px, while the effective width extends to 156px, as demonstrated below.
To prevent unforeseen outcomes such as an expansion in the width and height of the element, CSS provides a border-box value to assign to the box-sizing property.
Without Using the Box-sizing Property with the Border-box Value
The provided illustration showcases Element1, Element2, and Element3 without utilizing the box-sizing attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Without using Border-Box</title>
<style>
.Element1 {
height: 100px;
width: 250px;
}
.Element2 {
height: 100px;
width: 250px;
border: 3px solid blueviolet;
}
.Element3 {
height: 100px;
width: 250px;
border: 3px solid coral;
padding: 30px;
}
</style>
</head>
<body>
<h1>Without using border-box</h1>
<div class="Element1">It is an element whose width and height are specified. The size of the element is 250 px wide and 100px long.</div> <br>
<div class="Element2">It is an element whose width, height, and border are specified. When a border size is added to Element2, the size of the element becomes larger.</div> <br>
<div class="Element3">It is an element whose width, height, border, and padding are specified. When padding is added, the size of the element becomes larger than Element2.</div>
</body>
</html>
Explanation:
In the provided code snippet, the box-sizing property is not utilized. Three div elements have been generated with distinct classes such as Element1, Element2, and Element3.
Component1 is formatted using the subsequent CSS attribute:
Total height = 100px
Total width = 250px
The specific dimensions of Element1 are 100px in height and 250px in width.
Element2 is formatted using the subsequent CSS attribute:
The combined height is equal to 100px (height) plus 3px (top border) plus 3px (bottom border), resulting in a total of 106px.
The combined width equals 250px (height) plus 3px (right border) and 3px (left border), resulting in a total of 256px.
After applying the border to Element2, the dimension of the element expands.
Element3 is formatted using the subsequent CSS attribute:
The combined height is calculated as follows: 100px (height) + 3px (top border) + 3px (bottom border) + 30px (top padding) + 30px (bottom padding) = 166px
Total width is calculated by adding the height of 250px, the right border of 3px, the left border of 3px, the right padding of 30px, and the left padding of 30px, resulting in a total width of 316px.
After applying a border and padding to Element3, the dimensions of the element increase beyond those of Element2.
Output:
As you can notice, each element appears with varying dimensions, despite having been given identical width and height values.
The appearance of Element1, Element2, and Element3 will be as demonstrated below. Each element is customizable in various dimensions.
Using the Box-sizing Property with the Border-box Value
The provided illustration showcases Element1, Element2, and Element3 by utilizing the box-sizing attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Border-Box</title>
<style>
.Element1 {
height: 150px;
width: 300px;
box-sizing: border-box;
}
.Element2 {
height: 150px;
width: 300px;
border: 5px solid firebrick;
box-sizing: border-box;
}
.Element3 {
height: 150px;
width: 300px;
border: 5px solid darkmagenta;
padding: 15px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Using border-box</h1>
<div class="Element1">It is an element whose width and height are specified with the box-sizing property whose value is border-box. The size of the element is 300 px wide and 150px long.</div> <br>
<div class="Element2">It is an element whose width, height, and border are specified with the box-sizing property whose value is border-box. The size of Element2 remains the same.</div> <br>
<div class="Element3">It is an element whose width, height, border, and padding are specified with the box-sizing property whose value is border-box. The size of Element3 remains the same.</div>
</body>
</html>
Explanation:
In the code snippet above, the box-sizing attribute is being utilized. Three div elements have been generated with distinct classes such as Element1, Element2, and Element3.
Component1 is formatted using the subsequent CSS attribute:
Total height = 150px
Total width = 300px
The specific dimensions of Element1 are set to 150px in height and 300px in width.
Element2 is formatted using the subsequent CSS attribute:
Total height = 150px
Total width = 300px
Even with the addition of a border to Element2, the dimensions will not change due to the box-sizing property set to border-box, ensuring that the width and height stay consistent.
Element3 is formatted using the subsequent CSS attribute:
Total height = 150px
Total width = 300px
Even with the inclusion of a border and padding to Element3, the dimensions will stay consistent due to the utilization of the box-sizing attribute set to border-box.
Output:
As observed, every element maintains consistent width and height. Despite applying borders and padding to the elements, there is no impact on their dimensions. A border box encompasses both padding and a border within the total width and height of the element.
The arrangement of Element1, Element2, and Element3 will be displayed as illustrated below. The dimensions of each element stay unchanged. As borders and padding are included, they are adapted based on the element's width and height.
Conclusion
In this guide, you have grasped the concept of CSS border-box, a technique employed to contain both the border and padding within the total height and width of an element. Through practical illustrations, you have gained insight into the different behaviors of elements when utilizing or not utilizing a border box.
