title: How come i can separate the element from its content and change their separate sizes when its a text element, but not when its an image?
body: <p>What i mean is this. If my code is this:</p>
  
  <pre><code>&lt;div class="text-element"&gt;
  
  &lt;p&gt;Text&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, i can separate the element <p> from its content, in this case, the text, and create space between them, and change their individual size. I can change the size of the element and the size of the text. But i can't do the same thing for  element. </p>
  
  <p>If the code is:</p>
  
  <pre><code>&lt;div class="img-element"&gt;
  
  &lt;img src="mycat.jpg"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, when i change the size of the img, the size of the entire element changes, and when i change the size of the element, the image changes. I can't separate the element from the content, in this case, the image, and change their sizes separately like i can for other tags. Why is that? I want to separate the two, and create space between the  element and the actual image inside, and then work on both separately. Why is it that i can do that with other elements but not with "img" element? </p>