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
Add Different Padding to Each Side of an Element – FreeCodeCamp Solutions

Add Different Padding to Each Side of an Element

Add Different Padding to Each Side of an Element

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

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

CSS allows you to control the paddingof all four individual sides of an element with the padding-toppadding-rightpadding-bottom, and padding-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;

padding-top:40px;

padding-right:20px;

padding-bottom:20px;

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


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