Make an Image Responsive: Don't understand the reasoning behind the code

Tell us what’s happening:
Hi guys, I don’t understand what is the point of including display: block; and height: auto; in the style for. From what I can tell, the style properties are meant to make the image responsive to changes in the screen size (might be wrong) but when I remove display and height properties, the image still resizes perfectly when the screen size gets smaller. Can someone explain why these properties are included? Thanks!

Your code so far

  img {
  max-width: 100%;
  display: block;
  height: auto;

<img src="" alt="freeCodeCamp stickers set">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36.

Link to the challenge:

These values are default settings for many html tags. So you might just be getting them for free. You should still understand them though or you will have a hard time fixing alignment on your future webpages.