CSS Margin
CSS Margin property is used to give space around Html elements. You can give some space to your Html elements using this CSS property. It is completely transparent you can’t see any background color when you give this property to elements.
You can also provide margins of Html elements independently such as left, right, bottom and top.
You can provide the margin of an Html element by using values like - auto, %, length, etc. we can talk about it after some time with a full example.
The Margin CSS Property basically have 5 property these are: -
- Margin: - This CSS property will apply when the user wants to give margin value in one declaration.
- Margin-left: - This CSS property will only apply on the left side of the Html element.
- Margin-top: - This CSS property is used to set the margin on the top side of the Html element.
- Margin-bottom: - This CSS property is used to set a margin on the bottom side of the Html element.
- Margin-right: - This CSS property will only apply on the right side of the Html element.
Now, the margin CSS Property also has a different value these values are: -
- Auto: - This margin value is set by the browser automatically.
- Length: - This margin value is set by the user in px, cm, pt, etc
- %: - This margin value is set into %( percentages ) Like :- 25%, 30% etc
- Inherit: - This margin value is used to inherit margin from its parent element.
Let’s see through An amazing example of this topic.
<html>
<head>
<title> CSS Margin Property </title>
<style>
.container{
display: flex;
}
.box{
width: 216px;
height: 209px;
margin: 30px 30px 30px 30px;
}
#box1 {
border: 3px solid red;
background-color: rgb(204, 157, 157);
}
#box2{
border: 3px solid green;
background-color: rgb(157, 204, 182);
}
#box3{
border: 3px solid blue;
background-color: rgb(219, 230, 121);
}
#box4{
border: 3px solid purple;
background-color: rgb(163, 158, 233);
}
</style>
</head>
<body>
<div class = "container">
<p class= "box" id="box1"> Box 1 </p>
<p class = "box" id="box2"> Box 2 </p>
<p class = "box" id="box3"> Box 3 </p>
<p class = "box" id="box4"> Box 4 </p>
</div>
</body>
</html>
Output :-
In the above example, we have seen the margin CSS property. We provide margin property to all the boxes in a single declaration. Now we are going to give different CSS property to all boxes.
But before the example let see an example in which we didn't give any margin in the Html document. Look at the image below in this image you will see that all the boxes are combined together. There is no space between them.
Now, look at the example below. In this example, we applied different margin properties to the different boxes.
Example: -
<html>
<head>
<title> CSS Margin Property </title>
<style>
*{
margin: 0%;
background-color: rgb(209, 190, 190);
}
.container{
display: flex;
}
.box{
width: 216px;
height: 209px;
margin-left: 30px;
}
#box1 {
border: 3px solid red;
background-color: rgb(204, 157, 157);
}
#box2{
border: 3px solid green;
background-color: rgb(157, 204, 182);
margin-right: 50px;
}
#box3{
border: 3px solid blue;
background-color: rgb(219, 230, 121);
margin-top: 100px;
}
#box4{
border: 3px solid purple;
background-color: rgb(163, 158, 233);
}
</style>
</head>
<body>
<div class = "container">
<p class= "box" id="box1"> Box 1 </p>
<p class = "box" id="box2"> Box 2 </p>
<p class = "box" id="box3"> Box 3 </p>
<p class = "box" id="box4"> Box 4 </p>
</div>
</body>
</html>
Output: -
People Also Read: - CSS Tutorial : CSS Border Radius PropertyPeople Also Read: - CSS Tutorials :- CSS Background Property
0 comments:
Post a Comment