Need help understanding margins/padding

I am at the " Basic CSS: Add Different Padding to Each Side of an Element" part of the lesson and I was just confused with getting my head around padding and margins. I understand the general concept of the two, with padding being inside and margins being outside, but I’m having trouble understanding why the size of the box changes only when I change the size of the padding vertically and when I change the size of the margins horizontally. When I change the size of the padding horizontally it just moves the content inside and when I change the size of the margins vertically, it changes where the box is. Why doesn’t the box change in size when I change the value of padding-left and padding-right? TLDR margin-left and margin-right are doing what I thought padding-left and padding-right would do. Thank you!

Remember the elements (edit: the h5) are block level elements, they take up the full width of the container. If you set, say the blue box, to be display: inline-block you can see how the horizontal padding makes it grow and shrink in size. On the other hand, a horizontal margin will cause the block level element to shrink in size as it gets constrained.

.red-box {
  background-color: crimson;
  color: #fff;
  margin: 20px 150px;

.blue-box {
  display: inline-block;
  background-color: blue;
  color: #fff;
  padding: 0 40px;

Maybe I misunderstood your question?

Thank you! The inline-block really cleared it up for me. Just so I understand clearly, the elements take up the full width originally and the inline-block constrains that to the padding variables?