Add Different Padding to Each Side of an Element/Ayah

HTML-CSS
1

Tell us what’s happening:

Why i can not see response for my code in the part of setting the padding for green box
All the lessons about padding not work for me
I am sure the code is right
Someone tell me whos wrong me or there is a problem in the page

Your code so far

<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: red;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

  .green-box {
    background-color: green;
    Padding-top: 40px;
    Padding-left: 40px;
    Padding-right:20px;
    Padding-bottom:20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

Link to the challenge:
https://www.freecodecamp.org/challenges/add-different-padding-to-each-side-of-an-element

2

Hello mate,

seems like you’re using capital P in Padding.

cheers

1 Like
3

It does not affect since html not senseitve to captial or small letters. But I change it with no action.

4

Your padding is fine. You just don’t see it as h5 i displayed as block, so it’s taking full width. Run your code and click on ‘padding’ with right mouse button and click inspect. You will see that padding is as requested.

image
image1354×316 28.3 KB

1 Like
5

Hi,
Can you tell me the name of your code editor?

1 Like