I am using this reset.
* {
font-family: Arial, Helvetica, sans-serif;
outline: 0;
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
line-height: 1;
}
hr {display: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
blockquote, q {quotes: "" ""}
ul {list-style-type: none}
ol {list-style-type: decimal}
a {text-decoration: none}
.clear {clear: both}
The problem is that as long as I use the line height: 1 I see an extra pixel that doesn’t disappear no matter what I do in my block links, even if I tried to set the height, line length, font size for It. nothing works. Please tell me what happens with the height of the firefox string.
This is my css.
.tag {
display: block;
font-size: 11px;
background: #fff;
border: 1px solid #aaa;
color: #555;
text-transform: lowercase;
padding: 3px 6px;
}
Pretty simple huh? No, it seems. Firefox will create a pixel on top of the text, which I can clearly see that it is not balanced, although I set the top and bottom margins. Someone will tell me why this happens if I delete the line height: 1 from my reset there are a lot of troubles.