Почему я могу отделить элемент от его содержимого и изменить их отдельные размеры, когда это текстовый элемент, но не когда это изображение?

Question

Я имею в виду вот что. Если мой код такой:

<div class="text-element">

<p>Text</p>

</div>

Теперь я могу отделить элемент

от его содержимого, в данном случае текста, и создать пространство между ними, а также изменить их индивидуальный размер. Я могу изменить размер элемента и размер текста. Но я не могу сделать то же самое для элемента.

Если код:

<div class="img-element">

<img src="mycat.jpg">

</div>

Теперь, когда я изменяю размер img, размер всего элемента изменяется, и когда я изменяю размер элемента, изображение меняется. Я не могу отделить элемент от содержимого, в данном случае изображения, и изменить их размеры отдельно, как я могу для других тегов. Это почему? Я хочу разделить их и создать пространство между элементом и фактическим изображением внутри, а затем работать над обоими по отдельности. Почему я могу сделать это с другими элементами, но не с элементом «img»?