Declaration <! Doctype html> add element 2px padding-top to font
Here's a simple HTML code:
<!doctype html>
<html>
<head>
<style type="text/css">
body{ padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:normal; }
.pingBtCon{ display:block; margin:0px; border:1px solid; }
.pingFavoriteMe{ font-size:10px; color:#666; cursor:pointer; display:inline-block; }
.pingFavoriteMe:hover{ color:#333; }
</style>
</head>
<body>
<div class="pingBtCon"><a class="pingFavoriteMe">Favorite</a></div>
</body>
</html>
When I run it in Chrome, it adds 2px
padding-top
to div.pingBtCon
. Thus, its overall height becomes 17px
, which otherwise should only be 15px
. And it doesn't look that good.
But surprisingly, when I delete <!doctype html>
it .pingBtCon
becomes ok without padding-top
.
What's happening?
source to share
When you add the doctype, you put the browser in standard mode. One of the important differences between standard mode and other modes (quirks and near-standards) is that the height of the containing block's block level is taken into account when calculating the height of the lines of lines it contains.
So, without the standards mode doctrine, a div with class pingBtCon contains a single linear box whose height is proportional to the height of the Favorites text, that is, k * (10px).
In standard mode, the doctyoe div with the pingBtCon class contains a single inline box whose height is proportional to the maximum text height and font height as specified for the div (which in your case inherits its font size from the body element). that is, k * max (10px, 12px).
So with the doctrine of standards mode, the line of the line is a bit taller, and so therefore the div contains it.
To fix this, just set the font size of the div with the pingBtCon class to the same as the a element with the pingFavoriteMe class, i.e. 10px.
So add .pingBtCon { font-size:10px; }
source to share
You are using the deprecated tag font
. There is no reason for this when you can use CSS.
<a class="pingFavoriteMe pingBtCon">Favorite</a>
source to share
All new web pages must have a doctype to get you into standard mode. Without using the doctype, you go into quirks mode , and it is, like 1999, over and over again, where the margins and sheets, by the way, are all inside out, simple.
Leave the doctype and make sure it's the first thing you put on every page before adding anything else so you don't end up in a world of resentment as you're still having problems like you are now.
source to share