title: how to remove margin between elements
body: <p>I do have a <code>div</code> that has a image and another <code>div</code> with a h4 and p tag. After assigning <code>flex</code> to the parent div, the h4 and p tag have a margin which cannot be eliminated.</p>
  <p>The green marked place must be eliminated</p>
  <p><a href="https://i.stack.imgur.com/Gm40g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gm40g.png" alt="enter image description here" /></a></p>
  <p>Code:</p>
  <pre><code>&lt;div className={styles.profile}&gt;
        &lt;div&gt;
          &lt;img
            src=&quot;https://www.thesprucepets.com/thmb/sfuyyLvyUx636_Oq3Fw5_mt-PIc=/3760x2820/smart/filters:no_upscale()/adorable-white-pomeranian-puppy-spitz-921029690-5c8be25d46e0fb000172effe.jpg&quot;
            alt=&quot;sai&quot;
          /&gt;
        &lt;/div&gt;
        &lt;div className={styles.profile__name}&gt;
          &lt;h4&gt;TEST USER&lt;/h4&gt;
          &lt;p&gt;Premium Member&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Style:</p>
  <pre><code>.profile {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      object-fit: cover;
      filter: drop-shadow(0px 1px 32px rgba(234, 19, 19, 0.45));
    }
  }
  </code></pre>
  <p>I tried giving margin:0 to .profile__name but still the margin stays there.</p>