Warning: sizeof(): Parameter must be an array or an object that implements Countable in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/wp-membership/admin/pages/payment-inc/paypal-submit.php on line 11

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/includes/hooks.php on line 258
Adjust the Margin of an Element – FreeCodeCamp Solutions

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 *


Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13