Declaring <!doctype html> adding a 2px padding-top to font element -
here's 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 run in chrome, adds 2px padding-top div.pingbtcon. total height becomes 17px should otherwise 15px. , doesn't good.
but surprisingly, when remove <!doctype html>, .pingbtcon becomes ok no padding-top.
what's happening?
when add together doctype, set browser standards mode. 1 of import difference between standards mode , other modes (quirks , standards), font height of containing block-level box taken business relationship when calculating height of line boxes contains.
so, without standards mode doctype div class pingbtcon, contains 1 line-box, height proportional height of "favorite" text, i.e. k * (10px).
with standarda mode doctyoe, div class pingbtcon, contains 1 line-box, height proportional maximum of height of "favorite" text , height of font specified div (which in case inherits font-size body element). i.e. k * max(10px, 12px).
so standards mode doctype, line box higher, , therefore, containing div.
to prepare it, set font-size of div class pingbtcon same of element class pingfavoriteme, i.e. 10px.
so add together .pingbtcon { font-size:10px; }
html padding doctype
No comments:
Post a Comment