Adjust the Padding of an Element

Adjust the Padding of an Element

Basic CSS: Adjust the Padding of an Element

Now let’s put our Cat Photo App away for a little while and learn more about styling HTML.

You may have already noticed this, but all HTML elements are essentially little rectangles.

Three important properties control the space that surrounds each HTML element: paddingmargin, and border.

An element’s paddingcontrols the amount of space between the element’s content and its border.

Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more paddingthan the blue box.

When you increase the blue box’s padding, it will increase the

distance(padding) between the text and the border around it.

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

}

.blue-box {

background-color:blue;

color:#fff;

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