Inconsistent margin/padding around text with a border between Firefox and Chrome

Question

Take the following example:

span {
  color: blue;
  border: 1px solid blue;
  font: 9px Arial;
  font-weight: bold;
}

<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>
<span>LOREM IPSUM</span>

Browsers will add some inconsistent margins/paddings between the border and the text:

Firefox:

2px top and bottom
1px left
0px right

Chrome:

1px left, top and right
2px bottom

Resetting margin and/or padding to 0 does nothing. Is there anyway to get this more consistent between browsers? Preferably, with all sides having the same margin?

@machnaimh Not sure what you mean. I'm not adding any margins at all, those are added by the browsers. Even if I reset them (both `margin` and `padding`), those margins will still be there. — rfgamaral, Jun 14 '17 at 14:46
https://stackoverflow.com/questions/6737175/firefox-specific-margin — Brian, Jun 14 '17 at 14:56

score -1 · Answer 1 · answered Jun 14 '17 at 14:42

-1

You could try using different prefixes like below for example:

.someDiv {
   height: 19px; // probably your code
   -webkit-height:19px; // for chrome and safari
   -o-height:19px; // for opera
   -moz-height:19px; // for firefox
}

answered Jun 14 '17 at 14:42

joshsisley

310
2
11

Inconsistent margin/padding around text with a border between Firefox and Chrome

1 Answers1