4.1 The box-sizing Property
The box-sizing property in CSS is a powerful tool for handling the element sizing model.
It determines how the element's sizes are calculated, including width and height, along with padding, borders, and margins.
Let's dive into how box-sizing works and how using it can affect your webpage layout.
Main box-sizing Models
Content-box (Content model)
The value content-box is the default for all elements. In this model, the element's sizes
(width and height) are for the content only, excluding padding and borders. This means
padding and borders are added to the element's total width and height.
Border-box (Border model)
The value border-box alters the sizing model such that the element's sizes (width and height)
include padding and borders. This means that padding and borders are part of the total element width and height,
making it simpler to manage sizes.
Example of box-sizing Usage:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: width and height include content only.</div>
<div class="box border-box">Border-box: width and height include padding and borders.</div>
Code Explanation:
.box: basic style for all boxes, including padding, borders, and sizes.content-box: element with box-sizing: content-box, where width and height include content only.border-box: element with box-sizing: border-box, where width and height include padding and borders
4.2 Impact of box-sizing on Layout
Content Model (Content-box)
When box-sizing: content-box; is used, padding and borders are added to the element's total width and height.
This might require extra calculations when sizing and positioning elements.
Usage Example
In this case, the total width of the element will be
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px,
and the total height will be 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: width and height include content only.</div>
Border Model (Border-box)
When box-sizing: border-box; is used, padding and borders are included in the specified width and height of the element.
This makes it easier to size and manage elements, especially for responsive layouts.
Usage Example:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: width and height include padding and borders.</div>
4.3 Creating Responsive Layouts
Using box-sizing: border-box; simplifies creating responsive layouts, as
element sizes include padding and borders, preventing unexpected overflows.
Usage Example:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
Code Explanation:
* { box-sizing: border-box; }: applies border-box model to all elements on the page for easier size management.container: Flex container with a responsive layout.item: Flex items distribute width evenly and include padding and border in total width
4.4 Fixed Sizes with Internal Padding
Using box-sizing: border-box; makes it easy to set fixed sizes for elements
with internal padding, without worrying about overflow.
Usage Example:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Centers text vertically */
}
<div class="fixed-size">
Fixed sizes
</div>
Code Explanation:
.fixed-size: element with fixed 300x150 pixels size, including padding and border, allowing precise size control
GO TO FULL VERSION