Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
How browsers set vertical spacing
<!DOCTYPE html>
<html>
<head>
<title>How browsers set vertical spacing</title>
<style>
body {
margin: 20px;
font-family: Times,'Times new roman';
font-size: 16px;
line-height: 1.2;
}
.box {
background-color: rgba(255, 255, 51, .2);
font-size: 120px;
line-height: 100%;
/* positioning context */
position: relative;
}
.content {
background-color: rgba(255, 51, 51, .2);
display: inline-block;
}
.line {
position: absolute;
left: -10px;
right: -10px;
top: 0;
height: 0;
overflow:hidden;
}
.baseline {
border-bottom: 1px solid red;
top: 99px;
}
.font-body {
position: absolute;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
top: 16px;
height: 108px;
left: -10px;
right: -10px;
}
.gecko .baseline {
top: 90px; /*-9px*/
}
.gecko .font-body {
top: 7px; /*-9px*/
}
</style>
<script>
(function(doc, ua){
console.log(ua);
var bc = doc.documentElement.classList;
if (/gecko/.test(ua)) {
if (/webkit/.test(ua)) { bc.add('webkit') }
else { bc.add('gecko') }
}
else {}
}(document, navigator.userAgent.toLowerCase()));
</script>
</head>
<body>
<p>Times 60px/100%</p>
<p>Note at 60px font-size there is a 9px difference in the baseline between webkit and gecko</p>
<div class="box">
<span class="content">Figure</span>
<span class="content">eight</span>
<div class="line baseline"></div>
<div class="font-body">&nbsp;</div>
</div>
<div>
<ol>
<li><a href="http://www.w3.org/TR/CSS21/visudet.html#leading">W3C Visual formatting model details: Leading</a></li>
<li><a href="http://typophile.com/node/13081">Vertical Metrics How-To</a></li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=402473">Mozilla bug gives some info on font height</a></li>
</ol>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment