如何删除未定义的边距和填充css

xwbd5t1u 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(109)

我做此卡显示图像和信息，但有一个差距，我不能使用css删除
下面是样式和html

.card-container>* {
  width: auto;
  height: auto;
  margin: 0;
}

.ratings {
  display: flex;
  align-items: center;
  background-color: aqua;
  width: auto;
  height: fit-content;
}

.card-container img {
  width: 240px;
  height: 350px;
  object-fit: cover;
}

.card-container .stausbg {
  background-color: aqua;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="card-container">
  <img src='https://dummyimage.com/600x400/000/fff' alt='card' />
  <span class="stausbg">Sold Out</span>
  <div class="ratings">
    <i class="fa-solid fa-star"></i>
    <p class="no-star">5</p>
    <p class="no-pp">(40)</p>
    <i class="fa-solid fa-circle"></i>
    <p class="country">Usa</p>
  </div>
  <h5 class="title">Life lessons with jake</h5>
  <h6>From $200 / person</h6>
</div>

这里我使用了浅绿色作为. ratings类的背景色。我想删除未定义的空格（边距填充）并应用我自己的样式

css

来源：https://stackoverflow.com/questions/74963286/how-to-remove-undefine-margin-and-padding-css

2条答案

按热度按时间

mlnl4t2r1#

该空格来自p标记。请删除边距。

.ratings p {
  margin: 0;
}

赞(0）回复(0）举报 2023-01-03

wz1wpwve2#

如果你想把卡片中所有子项的边距都设置为零，那么就不要使用child combinator（〉），而直接使用descendent combinator。
相当多的开发者使用"reset"规则来删除一些奇怪的、默认的user agent stylesheet行为。下面是Kevin Powell关于这个主题的一个快速video。

.card-container * {
  width: auto;
  height: auto;
  margin: 0;
}

.ratings {
  display: flex;
  align-items: center;
  background-color: aqua;
  width: auto;
  height: fit-content;
}

.card-container img {
  width: 240px;
  height: 350px;
  object-fit: cover;
}

.card-container .stausbg {
  background-color: aqua;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="card-container">
  <img src='https://dummyimage.com/600x400/000/fff' alt='card' />
  <span class="stausbg">Sold Out</span>
  <div class="ratings">
    <i class="fa-solid fa-star"></i>
    <p class="no-star">5</p>
    <p class="no-pp">(40)</p>
    <i class="fa-solid fa-circle"></i>
    <p class="country">Usa</p>
  </div>
  <h5 class="title">Life lessons with jake</h5>
  <h6>From $200 / person</h6>
</div>

赞(0）回复(0）举报 2023-01-03

我来回答

如何删除未定义的边距和填充css

2条答案

相关问题

热门标签

最新问答