How to remove undefine margin and padding css

Question

I made this card to display an image and info but there is a gap I can't remove using css

Here is the style and 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>

Here I have used aqua color as the background color of .ratings class. I want to remove the undefined space (margin padding) and apply my own style

Depending on the browser you are using, you may be able to see more info in the inspector. (right-click, choose inspect in edge and chrome, probably similar for firefox). This will let you see which element the padding/margin is coming from. — , Dec 30 '22 at 15:47
Once you know which element, you just need to set the padding and margin to 0 — , Dec 30 '22 at 15:47
Not a fix but please note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Jan 01 '23 at 13:47

score 1 · Answer 1 · answered Dec 30 '22 at 15:44

1

That space is coming from p tag. Just remove the margin.

.ratings p {
  margin: 0;
}

answered Dec 30 '22 at 15:44

Engin

755
7
20

ok that works another thing what the gap between the image is and Sold-Out tag why it's not connected there is a small white space – xmr6204 Dec 30 '22 at 15:51
1

Because images are 'inline' items, it includes a small space for descenders so the image baseline aligns with the text baseline. It's there to accomodate letters like 'j' and 'g'. Set it to a block element and the gap disappears. https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image – Adam Dec 30 '22 at 15:55

score 0 · Answer 2 · answered Dec 30 '22 at 15:50

If you want to set all the margins of the child items in the card to zero then, instead of using the child combinator (>) just use the descendent combinator.

Quite a lot of developers use 'reset' rules to remove some of the weird, default user agent stylesheet behaviours. Here's a quick video by Kevin Powell on this topic.

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

How to remove undefine margin and padding css

2 Answers2