Can't remove 1 pixel bottom border from inside ;

Question

I have a simple table, and it has a 1 pixel space underneath the <td> elements.

I've tried getting rid of margins/padding/border-collapse/border-spacing/etc.., and it's still there.

Here's a simple case:

<table border=0 cellpadding=0 cellspacing=0 style='margin: 0px; padding: 0px; border: 0; border-spacing: 0; border-collapse: collapse;'>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='background-color: red; margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
                The first span
            </span></td>
    </tr>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='background-color: red; margin: 0px; padding: 0px; border: 0;'>
            <span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
                The second span
            </span>
        </td>
    </tr>
</table>

Also available at: http://jsfiddle.net/ydk4zob9/

On Chrome 41.0.2272.89 (but not firefox) I see 1 pixel of the red background from the td showing underneath the span

Table on chrome

How can I remove this?

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

you just need to set span to display:inline-block

why?

because span is an inline element therefore takes a whitespace in your HTML into account.

here is a snippet:

table {
  border-collapse: collapse;
}
td {
  background-color: red;
  padding:0;
}
span {
  background-color: white;
 
}
.first span {
  display: inline  /*the default value*/
}
.second span {
  display: inline-block
}

.third span {
  display: block
}

<h1>Inline</h1>
<table class="first">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Inline-block</h1>
<table class="second">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Block</h1>
<table class="third">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>

EDIT:

After the comments, here is a must read about INLINE ELEMENTS vs INLINE-BLOCK ELEMENTS

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 21 '15 at 11:58

dippas

58,591
15
114
126

That solves it, but the reason doesn't quite make sense. If I remove all the whitespace inside the table tags I still see the problem. Why do we need inline-block if there is no whitespace inside the table? – David Ljung Madison Stellar Mar 21 '15 at 16:14
because `span`by default is an `inline` element therefore takes a whitespace in HTML into account. as I stated in my answer below "why?" and if this solves your issue make sure you accept the answer :) – dippas Mar 21 '15 at 16:15
Actually that doesn't solve the problem on Chrome on Ubuntu - it actually now has a red border all the way around the span. Furthermore, as my comment explains, I took out all the whitespace, so there shouldn't be spacing due to that - furthermore that wouldn't explain the border on the bottom. – David Ljung Madison Stellar Mar 22 '15 at 19:04
See my updated answer and take a look at the differences between `inline`, `inline-block` &`block` and you will notice that in `inline` you have that extra 1px below `span` – dippas Mar 22 '15 at 19:58
@DavidLjungMadison - The "red border" is eliminated with `td { padding: 0; }` which acts the same as the deprecated `cellpadding="0"` attribute on the table which was removed in dippas example. – misterManSam Mar 22 '15 at 23:24
@misterManSam you are so right, I'm going to update the `padding`, when I updated the inline CSS to vanilla CSS I missed that property. – dippas Mar 22 '15 at 23:27
@misterManSam updated. Thanks for the reminder on the `padding`. This is what happen when we try to clean the code :) – dippas Mar 22 '15 at 23:31
Okay - I see that inline-block works, but I still don't see the why. I can remove all the whitespace from the table in between the
tags, and still get the border, so it can't just be the whitespace in the HTML.
– David Ljung Madison Stellar Mar 23 '15 at 02:39
please read the explanation that I already gave to you. what causes the whitespace it is ONLY the `span` being by default `display:inline` – dippas Mar 23 '15 at 02:41
Looking at explanations online, the reason for the space with inline is because of spaces and returns between HTML elements, such as "
", but I have taken these out (such as "
") and still see the problem. Just using display:inline shouldn't add whitespace around an object.
– David Ljung Madison Stellar Mar 27 '15 at 23:53
For example: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – David Ljung Madison Stellar Mar 27 '15 at 23:54

score 0 · Answer 2 · answered Mar 21 '15 at 12:04

use border bottom instead using background color red

<table border=0 cellpadding=0 cellspacing=0 style='margin: 0px; padding: 0px; border: 0; border-spacing: 0; border-collapse: collapse;'>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px;border-bottom:1px solid red'>
                The first span
            </span></td>
    </tr>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='margin: 0px; padding: 0px; border: 0;'>
            <span style='background-color: white; margin: 0px; padding: 0px; border-bottom:1px solid red'>
                The second span
            </span>
        </td>
    </tr>
</table>

I think you got the question backwards - the red border showing is undesirable. — David Ljung Madison Stellar, Mar 21 '15 at 16:14

Can't remove 1 pixel bottom border from inside ;

2 Answers2

EDIT: