An element's margin controls the amount of space between an element's border and surrounding elements.
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller.
When you increase the blue box's margin, it will increase the distance between its border and surrounding elements.
An element's margin controls the amount of space between an element's border and surrounding elements.
The syntax of using margin is:
margin: value;
If you set an element's margin to a negative value, the element will grow larger.
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 10px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
The output for this code is:
If the margin is set -25px then the output will be:
No comments:
Post a Comment