Do you think IIT Guwahati certified course can help you in your career?
Introduction
CSS is used to design and present web pages. It enables us to create easy-to-use, visually appealing web pages. The fundamental concepts like the box model, position and display property, etc., are thus essential.
We need to understand the box model, as it allows us to control the layout and positioning of elements on a page. We can create visually appealing web pages by manipulating the properties of each box.
This article will cover the CSS box Model concept in depth.
CSS Box Model
The CSS box model defines how elements are rendered on web pages by breaking them into rectangular boxes. Every webpage has different boxes that form its skeleton. The CSS box model deals with a box that wraps around every HTML element. CSS Boxes can either be blocks or inline. We use the display property in CSS to change the box type.
CSS box model consists of the following parts:
Margin
Border
Padding
Actual content
CSS Box Model
Let us look at the box model for an element in HTML:
Example with the different layers of the box model highlighted.
Let's discuss each part in detail.
Margin
The margin is the space around an element outside its border. It is the space between a box and its surrounding boxes. We can apply margin to all four sides of an element - top, left, right and bottom. The margin does not necessarily affect the size of the box, but it affects how that element interacts with other elements. For example, a larger top margin can push an element down on the page, while a larger left margin can move it horizontally.
The values the margin property can have are as follows:
Value
Description
auto
margin calculated by the browser
inherit
the margin value of the parent element is inherited
length
specifies a margin in cm, px, pt, etc.
%
specifies a margin in % of the width of the containing element
Let us look at the various ways to define the margin of an element.
The below syntax sets the margin on all sides as 10px.
margin: 10px;
The below syntax sets the top and bottom margins as 20px and the left and right margins as 40px.
margin: 20px 40px;
The below syntax sets the top margin as 20px, the left and right margins as 40px, and the bottom margin as 60px.
margin: 20px 40px 60px;
The below syntax sets the top margin as 20px, the right margin as 40px, the bottom margin as 60px, and the left margin as 80px.
margin: 20px 40px 60px 80px;
The below syntax sets the margin on each side separately.
The border is the line that surrounds an element’s content and padding. Every element has a border assigned to it, but most elements do not show it by default. Like margins, We can set borders to the element's top, bottom, left, and right. The CSS border properties specify an element's border's style, width, and colour. The border can create many things, such as boxes, buttons and dividers.
We can also set the border properties individually using the following properties:-
Border property
Description
border-width
sets border width with values in px, ems, etc.
border-style
sets border styles with values as dotted, solid, dashed, etc.
border-color
sets the colour of the border
Padding
The padding is the space around an element's content within the defined borders. We can also apply padding to all four sides of an element, just like the margin property. The rules to describe them are also similar to the margin property.
Let's look at the various ways to define the padding of an element.
The below syntax sets the padding on all sides as 10px.
padding: 10px;
The below syntax sets the top and bottom padding as 20px and the left and right padding as 40px.
padding: 20px 40px;
The below syntax sets the top padding as 20px, the left and right padding as 40px, and the bottom padding as 60px.
padding: 20px 40px 60px;
The below syntax sets the top padding as 20px, the right padding as 40px, the bottom padding as 60px, and the left padding as 80px.
padding: 20px 40px 60px 80px;
The below syntax sets the padding on each side separately.
The box's content, where text and images appear, is called the content area. It is the innermost layer of an element’s layout, surrounded by the padding, border and margin. The content layer is the primary reason for the existence of an element, and the other three layers enhance its appearance.
The CSS width and height properties control the dimensions of the content area.
The total width of an element is the sum of its left and right border values, the left and right padding values, and the content area width.
Box width = left padding + right padding + left border + right border + left margin + right margin + width.
Similarly, the total height of an element is the sum of its top and bottom border values, the top and bottom padding values, and the content area height.
Box height = top padding + bottom padding + top border + bottom border + top margin + bottom margin + height.
The box-sizing property can also calculate the width and height of an element. The different values possible for the box-sizing property are as follows:
Value
Description
initial
It sets the box-sizing property to its default value.
inherit
It inherits the box-sizing property from its parent element.
content-box
The width and height properties include only the content area, i.e., don’t include the border and padding.
border-box
The width and height properties include only the content area, border, and padding.
Let’s look at an example to understand the difference between box-sizing values.
As we can see in the content-box case, the width and height properties are applied only to the content area of the div element. However, In the border-box case, the width and height properties are applied to all parts of the div element combined: content area, padding, and borders.
The box model has four main areas: margin, border, padding and the actual content.
Can margins have negative values?
Yes, margin values can be negative. While a positive value places it farther from its neighbouring elements, a negative value puts it closer to its adjacent elements. We can use negative margins to overlap elements.
What is the use of CSS border-radius property?
We use the CSS border-radius property to make an element’s corners round. We can use this property to define the radius of an element's corners individually or for all corners together.
What is the overflow property?
When content is too big for the box, it is overflowing. The overflow property specifies whether to add scrollbars or clip the content to fit it in the box. The overflow property can have four values: visible, hidden, scroll, and auto.
What is the difference between intrinsic and extrinsic sizing?
Extrinsic sizing means sizing elements with explicit values using width or height properties. In intrinsic sizing, the sizing of an element depends on its content size.
Conclusion
This blog covers the concept of the CSS box model in detail, along with some frequently asked questions related to it. We have also discussed the different parts of the CSS box model: margin, border, padding, and content.
If you are preparing for an interview, frontend developers, check out the following article: 25 CSS Interview Questions.
518+ registered 
