Trying to adjust my margin top property for the image in my image container but it doesn't budge

HTML-CSS
1

With my margin-top property, I am trying to create space between the top of my image container and my image that is in my image container. But I find out that no matter how much I increase the margin top property, the distance between the top of my image container and the image does not increase.
https://codepen.io/noblegas/pen/JjjrZaN
https://nervous-varahamihira-c6c387.netlify.com

1 Like
2
  1. In order to adjust the margin-top of the image, you should set margin-top in img, not .img-container.
  2. To prevent collapsing margins, you can add overflow: auto; in .img-container.

To learn more, you might want to see Why does this CSS margin-top style not work?

3

what about adjusting the margin top property in the class of the image?

4

added the image tag class and that did not work. I also adjusted the margin-top property in the .img-src class of my image tag and that did not work either. https://codepen.io/noblegas/pen/JjjrZaN

5

Sorry, I didn’t noticed you have created a class in img. The point is to adjust the image, so adjusting the class inside the img will also work.

6

Try add overflow: auto; in .img-container .

7

That worked great for me. Thanks a bunch man!

1 Like