Css Box Model
Introduction
The Box Model property of CSS is used for design and layout of an html page. In CSS, all the elements has a rectangular box around it, you have to understand that to align the elements or to create layouts.
CSS Box Model is an area around the item which has various assets such as padding, margin and border. It acts as a set of tools to customize the design of various elements.
Width and Height of the element:
The width and height of an html element may vary according to the different browsers, thus you need to study the box model to understand how to assign values to the width and the height.
Note that when you set width and height of an element using CSS, it just sets the width and height of the content area. To personalize the element completely, padding, borders and margins must be used.
The CSS Box Model consists of following properties:
- Border
- Margin
- Padding
- Content
Note: When the padding or border values are not declared, they are either zero (css reset) or the default value of browser.
-
Border box:
This is the region around the content, between the margin and padding of the box. When the standard box model is used, size of border is assigned to width and height of the box.
There are a large number of properties of border for border styling. Also there are four borders and you can manipulate the color, style and width of each border.
To set the color, style and width of all four border at once you can use border property.
Following are the properties to set each side of the border individually:
- border-top
- border-right
- border-bottom
- border-left
Following are the properties used to set color, style and width of all sides of the border:
- border-color
- border-style
- border-width
It is also possible to set the width, style or color of single side using the following longhand properties:
- border- <side> -width
- border- <side> -style
- border- <side> -color
Where the <side> may be top, right, bottom or left.
Example:
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container{
font-size: 25px;
font-family: arial;
width: 500px;
height: 500px;
}
.box{
margin: 30px 20px;
height: 60px;
/*to set the width, style and color of all sides of the border*/
border: 12px solid skyblue;
border-right-width: 30px; /*to set the width of right side*/
border-bottom-color: hotpink; /*to set the color of bottom side*/
border-top: 4px dotted skyblue;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
<center>CSS Box Model : Border</center>
</div>
</div>
</body>
</html>
Output:
Here, different properties of border box are used to display the border.
-
Margin box:
It represents the outermost layer outside of the border. It is a transparent area around the box which lies between the border and the boundary of the window.
The values of the margin can be positive and negative. When you set the margin as negative, one side of the box overlaps other elements on the page.
To manipulate the margin of an element, you can use margin property. It changes the margin of all sides at once. And to change the margin of each side individually, you can use following longhand properties:- margin-top
- margin-right
- margin-bottom
- margin-left
Example:
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial;
width: 500px;
height: 300px;
border: 5px solid;
}
.box {
height: 60px;
border: 15px solid skyblue;
margin-top: 60px;
margin-right: -30px; /*negative value overlaps the outside border element*/
margin-bottom: 20px;
margin-left: 40px;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
<center>CSS Box Model : Margin</center>
</div>
</div>
</body>
</html>
Output:
Here, all the longhand properties of margin are used with different values. As we have given a negative value to the margin-right property, it overlaps the other element to its right.
-
Padding box:
Padding is the space between the content area and the border box. To decide the proportions of the padding box, its height and width needs to be specified.
Padding does not accept negative values like margins, so you should assign either zero or positive value to it. The main aim of using padding is to keep the content away from border with a particular distance provided.
To manipulate the padding of an element, you can use padding property which changes the padding of all sides at once. And to change the margin of each side individually, you can use the following long hand properties:- padding-top
- padding-right
- padding-bottom
- padding-left
Example:
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial;
width: 500px;
height: 300px;
margin-top: 40px;
margin-left: 40px;
}
.box {
height: 60px;
border: 15px solid skyblue;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 80px;
padding-left: 0;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
CSS Box Model : Padding
</div>
</div>
</body>
</html>
Output:
In the above output, all the longhand properties of padding are used with different values. The left-padding is set to 0, so there is no space between the left side of the border and the content.
-
Content box:
Content box is the area which displays the content of the page. It may be an image, text, or other media. The size of the content can be manipulated using properties like width and height.
Example:
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial;
margin: 20px 20px20px20px;
width: 400px;
height: 300px;
border: 5px brown dotted;
}
.box {
height: 100px;
border: 15px solid skyblue;
margin: 60px 30px 30px 60px;
padding-top: 0;
padding-left: 20px;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
This is the content box of CSS Box Model</div>
</div>
</body>
</html>
Output:
Above output displays all the properties of Box Model i.e margin, padding, border and content.
To calculate the size of the box on a web page we use:
| Size | Properties |
|---|---|
| Width | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
| Height | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
In this way, we have learnt the CSS Box Model and its various properties to manipulate the design and layout of an html page.