Adjust the Margin of an Element

Adjust the Margin of an Element

Basic CSS: Adjust the Margin of an Element

An element’s margincontrols the amount of space between an element’s borderand 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 marginthan 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.

<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">

<h5class="box red-box">padding</h5>

<h5class="box blue-box">padding</h5>

</div>

Leave a Reply

Your email address will not be published. Required fields are marked *