CSS margin
Understanding DimensionsIn this lesson, we will learn how to implement margin on HTML elements using CSS margin properties.
CSS margin Property
The CSS margin property is used to apply an extra spacing around an element from the outside of its border.
Margins are transparent spaces around an element that push other elements away. It's a shorthand property for setting margin on all 4 sides. For example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
height: 150px;
border: 1px solid red;
margin: 50px 20px 80px 100px;
}
</style>
</head>
<body>
<div>
<p>Set margin to all the four sides</p>
</div>
</body>
</html>In the above example, the first value in the margin property is for top margin, the second value is for right margin, the third value is for bottom margin and the fourth value is for left margin.
The margin property can be set in any one of the four ways given below. For example:
- margin: 80px 30px 60px 90px;
- top margin is 80px
- right margin is 30px
- bottom margin is 60px
- left margin is 90px
- margin: 80px 30px 60px;
- top margin is 80px
- right margin is 30px
- bottom margin is 60px
- here left margin values is not given so the left margin value will be same as right margin value which is 30px
- margin: 80px 30px;
- top margin is 80px
- right margin is 30px
- here bottom margin values is not given so the bottom margin value will be same as top margin value which is 80px
- here left margin values is not given so the left margin value will be same as right margin value which is 30px
- margin: 80px;
- all four margins are 80px
Margin for Individual Sides
In CSS, it is possible to specify different margins for different sides.
- margin-top: It is used to set the top margin of an element.
- margin-bottom: It is used to set the bottom margin of an element.
- margin-left: It is used to set the left margin of an element.
- margin-right: It is used to set the right margin of an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS individual sides margin Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
height: 150px;
border: 1px solid red;
margin-top: 20px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 40px;
}
</style>
</head>
<body>
<div>
<p>Set margin to individual sides</p>
</div>
</body>
</html>Align Center using margin Property
To center an element horizontally using margin property, you can follow these steps:
- First, make sure the element you want to center has a fixed width. This is crucial for centering using margin property.
- Apply margin: 0 auto; to the element. This means you set the top and bottom margins to 0 and the left and right margins to auto.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align Center using Margin Example</title>
<!-- Internal CSS -->
<style>
.box1 {
width: 200px;
height: 100px;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">Box1</div>
</body>
</html>Align Right using margin Property
Right-aligning an element using the margin property in CSS is a bit different from centering. To right-align an element, you typically set the left margin to auto. Here's how you can do it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align Right using Margin Example</title>
<!-- Internal CSS -->
<style>
.box1 {
width: 200px;
height: 100px;
margin-left: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">Box1</div>
</body>
</html>Align Left using margin Property
Left-aligning an element using the margin property in CSS is quite straightforward. To left-align an element, you set the right margin to auto. Here's how you can do it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align Left using Margin Example</title>
<!-- Internal CSS -->
<style>
.box1 {
width: 200px;
height: 100px;
margin-right: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">Box1</div>
</body>
</html>