Padding in CSS

• 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: padding, border, and margin.
• An element's padding controls 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 padding than 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.
• The syntax of the padding is:

        padding: value;

• An example of the code is:

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

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

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

</div>

• The output of this code is: