Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
How browsers set vertical spacing
<!DOCTYPE html>
<title>How browsers set vertical spacing</title>
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;
.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*/
(function(doc, 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()));
<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>
<li><a href="">W3C Visual formatting model details: Leading</a></li>
<li><a href="">Vertical Metrics How-To</a></li>
<li><a href="">Mozilla bug gives some info on font height</a></li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment