CSS padding distance?-CodePudding

Free Code Camp defines padding as the distance between the elements of a container and its borders.

In this example (https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element

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

<h5 >margin</h5>

<div >
  <h5 >padding</h5>
  <h5 >padding</h5>
</div>

The padding of the element (the word in white "padding") seems to be correct on all of values (top, down, left) except for the right direction; the (padding-right) is supposedly 20px which is equal to the (padding-bottom) but there is a huge difference between the 2 distances.

What am I missing?

CodePudding user response：

I believe that the h5 cascades to a display: block which causes the element to span the available distance (minus padding of course). Try adding :

display: unset

to the .red-box class and see if it looks like more like you were expecting.

CodePudding user response：

I have a complete Github repo with all answers to FreeCodeCamp!

https://github.com/Laaouatni/FreeCodeCamp-Responsive-Web-Design

use this if you need some help, the code there is 100% working because I do it also :)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>

<body>
  <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: 20px;
    }
  </style>
  <h5 >margin</h5>

  <div >
    <h5 >padding</h5>
    <h5 >padding</h5>
  </div>
</body>

</html>

<!-- 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: 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. Change the padding of your blue box to match that of your red box. -->

CodePudding user response：

The padding is correct, but you can't see the padding left and right because the text-align is centred.

Add the following and you will see the correct padding to the left in the green box, and the correct padding to the right in the orange box.

...
 .green-box {
    background-color: lime;
    padding-left: 20px;
    text-align: left;
  }
  .orange-box {
     background-color: orange;
     padding-right: 20px;
     text-align: right;
  }
 </style>
 <h5 >margin</h5>

<div >
  <h5 >padding</h5>
  <h5 >padding</h5>
  <h5 >padding</h5>
  <h5 >padding</h5>
</div>