【问题标题】:how to remove margin between elements [duplicate]如何删除元素之间的边距[重复]
【发布时间】:2022-02-02 16:23:26
【问题描述】:

我确实有一个带有图像的div 和另一个带有h4 和p 标签的div。将flex分配给父div后,h4和p标签有一个无法消除的边距。

绿色标记的地方必须消除

代码:

<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>

风格:

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

我尝试将 margin:0 赋予 .profile__name 但边距仍然存在。

【问题讨论】:

  • 尝试在h4p标签上添加margin: 0;

标签: css sass


【解决方案1】:

尝试在h4p 标签上添加margin: 0;

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

【讨论】: