Focus on padding and leave margin out of the exercise. It's not needed for the exercise and potentially confusing for anyone looking at the css.

Remove border around yellow box because it detracts from padding lesson, which focuses on the nested boxes to illustrate padding. While there is padding associated with the yellow box, it is not necessary for the lesson.

Also, add one more box - an orange one with no padding, to show what and where padding is.

Add explanation that the black border is outside of the padding, not part of it, the beginning of the padding cannot be seen because it is not marked and background fills entire box, including padded and non-padded areas.

Change box text to indicate amount of padding.

Here's the suggested code for the lesson:

<style>


  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box-padding{
    background-color: yellow;
    padding:10px;
  }

  .orange-box-no-padding {
    background-color: orange;
    padding: 0px;
  }

  .red-box-padding {
    background-color:red;
    padding: 20px;
  }

  .green-box-padding {
    background-color: green;
    padding: 10px;
  }
</style>

<div class="yellow-box-padding">
  <h5 class="box orange-box-no-padding">no padding</h5>
  <h5 class="box red-box-padding">20px padding</h5>
  <h5 class="box green-box-padding">10 px padding</h5>
</div>

Here's the suggested lesson wording (the formatting didn't copy):

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, margin, and border. In this lesson, we look at padding.

An element's padding controls the amount of space between the element and where its border begins, which is also the inside edge of the border.

Here, we can see that the orange box, green box and the red box are nested within the yellow box. There is a black border around each of the three nested boxes. In each nested box, the padding stops where that black border begins.

You cannot see where the padding begins because it is not marked and the background color fills the entire box, including both the portion without padding and the portion with padding. But, you can look at the orange box to get an idea of the size of the area around the text that has no padding.

The text in each of the three nested boxes tells you how much padding, if any, there is in the box. The orange box has no padding. The red box has 20px (20 pixels) of padding. And, the green box has 10px (10 pixels) of padding.

When you increase the green box's padding, it will increase the distance between the text and the border around it.

Change the padding of your green box to match that of your red box.

Your proposed text is about 260 words, up from 126 words in the original. This is too long by about ~100 words. We aim for around 100 words. Any more and no one reads it. It also doesn't fit well into the display area.

We're not going to leave margin out of it because this challenge is a lead-in to the next two waypoints which DO discuss margin. Padding here is used in contrast to the margin.

I am amenable to adding a box with no padding - I think that's potentially a good idea, but we can't increase the word count dramatically. If you'd like to take a stab at re-writing it with a target of no more than ~160 words, we might be able to use that.

@SaintPeter any updates on this?

@freecodecamper Closing this as stale with no updates.
Please feel free to comment to re-open.

/cc @SaintPeter @bugron