how to remove margin between elements

Question

I do have a div that has a image and another div with a h4 and p tag. After assigning flex to the parent div, the h4 and p tag have a margin which cannot be eliminated.

The green marked place must be eliminated

Code:

<div className={styles.profile}>
      <div>
        <img
          src="https://www.thesprucepets.com/thmb/sfuyyLvyUx636_Oq3Fw5_mt-PIc=/3760x2820/smart/filters:no_upscale()/adorable-white-pomeranian-puppy-spitz-921029690-5c8be25d46e0fb000172effe.jpg"
          alt="sai"
        />
      </div>
      <div className={styles.profile__name}>
        <h4>TEST USER</h4>
        <p>Premium Member</p>
      </div>
    </div>

Style:

.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));
  }
}

I tried giving margin:0 to .profile__name but still the margin stays there.

Answer 1

try to add margin: 0; on h4 and p tag

.profile h4, .profile p{
    margin: 0;
}