3

For some reason I can't override the border-spacing in the User Agent style sheet in Chrome. At the moment it is set to 2px, but I want this to be 0px. The border-collapse gets overridden just fine but the border-spacing does not.

I've also tried adding -webkit-border-horizontal-spacing and -webkit-border-vertical-spacing

But these overrides do not work as well.

My HTML document

<!DOCTYPE html>
<html>
  <head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
  <table border="0" cellspacing="0" cellpadding="0">
      <tbody>
         <tr>
             <td><img src="iron-helmet.png"></td>
             <td><img src="gold-helmet.png"></td>
             <td><img src="diamond-helmet.png"></td>
         </tr>
      </tbody>
  </table>  
</html>

My inventorystyle.css

table {
    border-collapse: collapse;
    border-spacing: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
user2896819
  • 65
  • 2
  • 5
  • Are you using the CSS reset file? Better you can use `Normalize.css` here is the link. http://necolas.github.io/normalize.css/ – Kheema Pandey Aug 06 '14 at 05:01
  • I referenced the normalize.css in my html but still no luck. I really don't understand what's wrong. It's definitely not my pictures because in Firefox the table is fine. – user2896819 Aug 06 '14 at 05:15
  • make it more specific like `table.classname {apply your stlye}`.. – Kheema Pandey Aug 06 '14 at 05:17

2 Answers2

3

This was driving me mental.

Try adding the css img {display:block;}

This got rid of it for me.

Brad
  • 31
  • 2
2

This is just a bug in the way Chrome shows CSS rules in Developer Tools. The border-spacing property works as defined in Chrome.

In this case, if you inspect the table element, the border-spacing information is shown correctly. It’s just for the inner elements, such as td, where the Developer Tools show misleading information. The border-spacing property does not apply to them, by definition, so its value for them is irrelevant anyway. And if you click on “Computed”, you will see that the computed styles do not contain border-spacing at all, even in inherited properties.

In the example, the value of border-spacing for the table element does not have any effect either, since a) the collapsing border model is being used and b) the HTML markup contains the cellspacing="0" attribute, which sets border-spacing to 0, unless you explicitly override this in CSS.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks this helped explain a lot. I was looking in the wrong place. Turns out the width of my table was giving me grief. – user2896819 Aug 06 '14 at 06:16
  • Is this bug reported? I can't find it: https://code.google.com/p/chromium/issues/list?can=2&q=label%3ACr-Platform-DevTools+border-spacing&colspec=ID+Pri+M+Iteration+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified&x=m&y=releaseblock&cells=tiles – Konrad Dzwinel Aug 06 '14 at 09:50
  • cellspacing="0" is the magic here, when set to the element.
     – Bullsized Jul 08 '22 at 09:55