unwanted Space between table rows

Beki 0
Viewed 23

I can't seem to get the little space between the rows to close.

The space did decrease after using border-collapse: collapse; but there is still a tiny bit left.

table {
  border-radius: 20px;
  overflow: hidden;
  border-collapse: collapse;
}

img {
  display: block;
  width: 300px;
  min-width: 300px;
  max-width: 1440px;
}

.text-container {
  width: 300px;
  min-width: 300px;
  max-width: 1440px;
}
<table>
  <tr>
    <td class="img-container">
      <img src="images/image-product-desktop.jpg" alt="image-product-desktop-version" />
    </td>
    <td class="text-container">
      <h3 class="title1">PERFUME</h3>
      <h2 class="title2"><b>Gavrielle Essence Eau De Parfum</b></h2>
      <p class="description-text">
        A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
      </p>
      <div class="both-prices">
        <h2 class="new-price">$149.99</h2>
        <h4 class="old-price">$169.99</h4>
      </div>
      <a class="cart-btn" href="#"><span></span>Add to cart</a>
    </td>
  </tr>
</table>

css html
1 Answers

The problem here is that each of the elements inside of your <tr> have a default margin, creating that additional space you do not want (illustrated here in yellow).

Here are two options:

Option 1: Recursively select all child elements of your text-container class and set the margin to 0: Reference: How to Select All Child Elements Recursively in CSS

.text-container > * {
  margin: 0;
}

Option 2: Create an additional CSS class that removes the margin from each element and apply as needed. For example:

.no-margin {
  margin: 0;
}

<h3 class="title1 no-margin">PERFUME</h3>

A helpful tool for debugging this sort of problem is the browser's developer tools. Check out this link that describes debugging in Google Chrome. Chrome View and change CSS. Other browsers have very similar tools.

Noremak0
Related