In web development, the layout and design of a web page are crucial to its success. The CSS Box Model is a fundamental concept in web design that affects the layout and spacing of HTML elements on a web page.
In this article, we will explore the CSS Box Model and its different components, including the content area, padding, borders, and margins. This article is suitable for web developers and designers who are interested in improving their understanding of CSS and its usage in web design.
Prior knowledge of HTML & basic CSS concepts is recommended. (Here is my articles, you might want to check out for some basics: Introduction to Web & HTML & Introduction to CSS).
By the end of this article, you will have a thorough understanding of the CSS Box Model and how to use it to create visually appealing web pages. You can also find link to the GitHub repository where you can find code files and websites.
Box Model
Every element in web design is itself a box. It's a container having properties such as margin, border, padding, height, & weight. Each box model has a content area content can be anything (for eg. text, an image, a video, etc.), and then comes padding, border, & margin to its surroundings. Each area has its specified size by CSS properties.
Block and inline boxes
We have only two types of boxes in CSS, block boxes and inline boxes. Display property in CSS decides "how these boxes will behave". The default value of the element is Inline.
display: block;
We generally set elements like <h1> , <p> <div>, <section>, and <ul> to block. Block-level elements take a whole new line as horizontal space its container has. Other elements get pushed away from the box by its padding, margin, and border.
display: inline;
The inline element stays within a line without breaking into a new line and allows margin and padding, but it will only push another element horizontally away and the element in the vertical direction will not get affected. Some Html elements, such as <a> , <span>, <strong>, etc. use inline as their outer display type by default.
The below example illustrates how both block and inline boxes work:
Take look at the diagram which demonstrates the terminology of the Box Model:
The margin, border, and padding can be broken down into the top, right, bottom, and left segments.
Parts or Properties of the Box model
1. Margins:
Margins are used to allocate space around the element. It's the outmost section of the box model. Margins are set using lengths, percentages, or the keyword auto and can have negative values (pull the element itself or another element towards it).
Collapsing Margins simply mean If two elements are in vertical contact, their margins will collapse and form a single margin equal to whichever element has a bigger margin value.
Here's a Syntax:
body{
margin: size;
}
There are four ways to define margins:
margin: 40px 100px 120px 80px;top = 40px
right = 100px
bottom = 120px
left = 80px
margin: 40px 100px 120px;top = 40px
right and left = 100px
bottom = 120px
margin: 40px 100px;top and bottom = 40px;
left and right = 100px;
margin: 40px;- top, right, bottom, and left = 40px
Refer to the following Example code for a better understanding:
Note: The margin is not counted in the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.
2. Border:
It's shorthand syntax in CSS used to enclose the content area and padding. The border property has many values for drawing a line around the element.
Syntax:
border: <line-width> || <line-style> || <color>
The border the property accepts one or more of the following values in combination:
border-width: Specifies the thickness of the border.border-style: Specifies the type of line drawn around the element.border-color: Specifies the color of the border and accepts all valid color values.
3. Paddings:
This CSS property is similar to margin which allocates space around the element but the only difference between margin and padding is that margin creates space outside the border and padding inside the defined border.
Syntax:
body
{
padding: size;
}
Padding also has four ways to define size just like the margins.
padding: 40px 100px 120px 80px;top = 40px
right = 100px
bottom = 120px
left = 80px
padding: 40px 100px 120px;top = 40px
right and left = 100px
bottom = 120px
padding: 40px 100px;top and bottom = 40px;
left and right = 100px;
padding: 40px;- top, right, bottom, and left = 40px
Refer to the following Example code for a better understanding:
4. Content:
Content Area is defined by the width and height, which often depend on the length of content.
Box-sizing
let's see how the box-sizing property in CSS controls the behavior of the box model for the element.
The following are the values of box-sizing:
Border-box and Content-box refer to two different box-sizing properties in CSS that determine how the total width and height of an element are calculated.
Syntax:
.module {
box-sizing: border-box // content-box;
}
border-box;
In the border-box model, the width and height of an element include the content, padding, and border. The total width and height are calculated from the outer edges of the border. This means that if you set the width or height of an element, the padding, border, and margin are included within that width or height value. The content area may shrink if padding or a border is added, ensuring that the overall dimensions of the elements remain constant.
Now, let's switch to a different packing style. With border box, the size of the box includes the content, padding, and border altogether. It's like having a box with fixed dimensions and putting the gift inside it. If you add padding or a border, it won't increase the overall size of the box because the padding and border are included within the specified dimensions. The content will adjust to fit inside the box while accounting for the padding and border.
content-box;
In the content-box model, the width and height of an element are calculated based on the content's width and height, excluding padding, border, and margin. This means that if you set the width or height of an element, the padding, border, and margin will be added on top of it. The content area remains constant, and any additional space required by padding, border, or margin will increase the overall dimensions of the element.
Think of it as packing a gift. Imagine you have a box and you want to fit something inside it. In the content-box model, the size of the box is calculated based on the content's size. So, if you add padding, border, or margin, it will increase the overall size of the box. It's like putting a gift inside a box and then adding extra wrapping around it. The size of the box expands to accommodate the extra wrapping.
Let's understand it more clearly with an example:
Suppose we set an element to width: 300px; padding: 30px; border: 10px;. By default, the total width of the box would be 380px (300 + 30 + 30 + 10 + 10) because the default box-sizing model is content-box. In the content-box model, the width only applies to the content area of the element. The padding and border are added on top of the specified width.
However, if we change the box-sizing value from content-box to border-box, the box's total width would then be 300px only. This is because the padding (40px) and the border (20px) are included within the specified width. In the border-box model, the width encompasses the content, padding, and border, ensuring that the overall dimensions of the element remain constant.
In summary, the difference between content-box and border-box lies in how the width is calculated and whether the padding and border are included within that width. Content-box adds the padding and border on top of the specified width, while border-box includes them within the specified width.
Conclusion:
The CSS Box Model is a crucial concept for web designers and developers to understand in order to create visually appealing and functional web pages. By knowing how the different components of the Box Model affect layout and spacing, you can create responsive designs that work across multiple devices.
I hope this article has provided you with a solid understanding of the CSS Box Model and how to use it effectively in your web design projects. To further your understanding of CSS layouts, I recommend checking out my next articles which will build upon the knowledge you have gained here:
By mastering these concepts, you will be well on your way to creating beautiful and responsive web designs. So stay tuned and keep learning!
Congratulations to you for coming this far! 🎉🎉
Here is link to code files and there hosted websites.
- Code files:- ( GitHub )
Thank you for reading. If you found it helpful, then feel free to comment.😇😇