What is the CSS Box Model? Explanation and Examples
Day 11 : 60 Days Of Full Stack Web Development Challenge
CSS height property :
CSS Height property sets the height of an element.
It is used to set the height of content area of an element.
It does not include padding borders or margins, whereas it sets the height of the area inside the padding, border, and margin of the element.
It can accept the length and percentage values. But it does not allow negative values.
If we set the height to a numeric value (like in px, %, etc.), the content can be overflow if it does not fit in the given height.
We can manage the overflowing content by defining the overflow property.
If the height of the container is not explicitly defined, and the element is not absolutely positioned (i.e., position: absolute;), the value of height property is set to auto.
The min-height and max-height properties can also be used to control the size.
Syntax :
height: auto | length | initial | inherit;
Property Values :
The values of this property are tabulated as follows.
| Value | Description |
| auto | It is a default value. Using this value browser is responsible for calculating the height of the element. Negative values are not allowed. |
| length | It specifies the height of an element using the length units such as px, cm, pt, etc. Negative values are not allowed. |
| % | It defines the height of the container in %. Negative values are not allowed. |
| initial | It is used to set the property to its default value. |
| inherit | It is used to inherit the property from its parent element. |
Now, we will see some of the examples to understand this property more clearly.
CSS Width Property:
The CSS width property is used to set the width of the content area of an element*.*
It does not include padding borders or margins.
It sets width of the area inside the padding, border, and margin of the element.
Example Of Hight And Width Property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Output:
CSS Box Model :
The components that can be depicted on the web page consist of one or more than one rectangular box.
A CSS box model is a compartment that includes numerous assets, such as edge, border, padding and material.
It is used to develop the design and structure of a web page.
It can be used as a set of tools to personalize the layout of different components.
According to the CSS box model, the web browser supplies each element as a square prism.
The following diagram illustrates how the CSS properties of width, height, padding, border and margin dictate that how much space an attribute will occupy on a web page.
Explanation of the different parts:
Content -
Contains the actual data, such as text, images, or other media.
Sized using the width and height properties.
Bounded by the content edge
The content of the box, where text and images appear.
Padding -
Surrounds the content area.
Space within the border box.
Dimensions are determined by the width and height of the padding box.
The padding is transparent
Clears an area around the content.
Border -
Lies between the padding and margin.
Width and height are defined by the border.
A border that goes around the padding and content.
Margin -
Separates the element from neighboring elements.
Dimensions specified by the margin-box width and height.
Clears an area outside the border.
The margin is transparent
How Does the Box Model Work?
When setting the width and height properties for an element, we’re mainly adjusting the content area. However, to calculate the full size of the element, we need to consider padding, borders, and margins.While setting the width and height properties of an element with CSS, we have only set the width and height of the content area. We need to add padding, borders, and margins in order to calculate the full size of an element. Consider the below example.
p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
Total Width Calculation :
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total width of the element is 94px.
Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px (left margin + right margin) = 94px.
Total Height Calculation :
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Total height of the element is 84px.
Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border) + 0px (top margin + bottom margin) = 84px.
1) CSS Padding :
CSS Padding property is used to define the space between the element content and the element border.
It is different from CSS margin in the way that CSS margin defines the space around elements.
CSS padding is affected by the background colors. It clears an area around the content.
Top, bottom, left and right padding can be changed independently using separate properties.
You can also change all properties at once by using shorthand padding property.
CSS Padding Properties :
| Property | Description |
| padding | It is used to set all the padding properties in one declaration. |
| padding-left | It is used to set left padding of an element. |
| padding-right | It is used to set right padding of an element. |
| padding-top | It is used to set top padding of an element. |
| padding-bottom | It is used to set bottom padding of an element. |
CSS Padding Values :
| Value | Description |
| length | It is used to define fixed padding in pt, px, em etc. |
| % | It defines padding in % of containing element. |
CSS Padding Example :
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
Output:
2) CSS Border :
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element.'
3)CSS Margin
CSS Margin property is used to define the space around elements.
It is completely transparent and doesn't have any background color.
It clears an area around the element.
Top, bottom, left and right margin can be changed independently using separate properties.
You can also change all properties at once by using shorthand margin property.
There are following CSS margin properties:
CSS Margin Properties :
| Property | Description |
| margin | This property is used to set all the properties in one declaration. |
| margin-left | it is used to set left margin of an element. |
| margin-right | It is used to set right margin of an element. |
| margin-top | It is used to set top margin of an element. |
| margin-bottom | It is used to set bottom margin of an element. |
CSS Margin Values :
These are some possible values for margin property.
| Value | Description |
| auto | This is used to let the browser calculate a margin. |
| length | It is used to specify a margin pt, px, cm, etc. its default value is 0px. |
| % | It is used to define a margin in percent of the width of containing element. |
| inherit | It is used to inherit margin from parent element. |
CSS margin Example :
You can define different margin for different sides for an element.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
Margin: Shorthand Property :
CSS shorthand property is used to shorten the code. It specifies all the margin properties in one property.
There are four types to specify the margin property. You can use one of them.
margin: 50px 100px 150px 200px;
margin: 50px 100px 150px;
margin: 50px 100px;
margin 50px;
1) margin: 50px 100px 150px 200px;
It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px
2) margin: 50px 100px 150px;
It identifies that:
top margin value is 50px
left and right margin values are 100px
3) margin: 50px 100px;
It identifies that:
top and bottom margin values are 50px
left and right margin values are 100px
4) margin: 50px;
It identifies that:
top right bottom and left margin values are 50px
CSS Box Sizing :
What is CSS Box sizing Property?
The CSS box-sizing property is used to specify how to calculate the total height and width of an element.
It controls the size of an element with a specified height and width.
It allows you to include the padding and border within the total height and width of the element.
Box-shadow CSS :
It is used to add shadow-like effects around the frame of an element.
Syntax :
box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
Let's understand property values:
h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to the right side of the box. Its negative value is used to set the shadow on the left side of the box.
v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive value in it sets the shadow below the box, and the negative value sets the shadow above of the box.
blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.
spread: It sets the shadow size. The spread size depends upon the spread value.
color: As its name implies, this attribute is used to set the color of the shadow. It is an optional attribute.
inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be created within the box.
initial: It is used to set the property of the box-shadow to its default value.
inherit: it is inherited from its parent.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
div
{
border: 1px solid;
padding: 10px;
}
#hvb
{
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
</style>
</head>
<body>
<div id = "hvb">
<h1>It is a shadow box that has h-offset, v-offset and blur attributes.</h1>
</div>
</body>
</html>
Output:
Conclusion:
his article explores box models and their representation, as well as the pros and cons of each. We delve into commonly used methods for defining box Properties in CSS.Feel free to leave any comments or questions below. If you found this article informative, please share it with your network. Thank you.
What Next ?
Basic CSS Properties.