Add Different Margins to Each Side of an Element

Add Different Margins to Each Side of an Element

Basic CSS: Add Different Margins to Each Side of an Element

Sometimes you will want to customize an element so that it has a different marginon each of its sides.

CSS allows you to control the marginof all four individual sides of an element with the margin-topmargin-rightmargin-bottom, and margin-leftproperties.

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

margin-top:40px;

margin-right:20px;

margin-bottom:20px;

margin-left:40px;

}

.blue-box {

background-color:blue;

color:#fff;

}

</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 *