CODEWITHSUNDEEP
cssgoogle-chromeoverridingagentborder-spacing
user2896819
user2896819

Reputation: 65

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

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;
}

Upvotes: 3

Views: 4368

Answers (2)

Brad
Brad

Reputation: 31

This was driving me mental.

Try adding the css img {display:block;}

This got rid of it for me.

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

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.

Upvotes: 2

Related Questions