Can't override border-spacing in User Agent style sheet

3
votes

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;
}
2
cssgoogle-chromeoverridingagentborder-spacing
Are you using the CSS reset file? Better you can use Normalize.css here is the link. necolas.github.io/normalize.css – Kheema Pandey
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
make it more specific like table.classname {apply your stlye}.. – Kheema Pandey

2 Answers

3
votes

This was driving me mental.

Try adding the css img {display:block;}

This got rid of it for me.

1
votes

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.