JSFiddle - React, Tailwind, and code Playground

by Arkkimaagi

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>wtf</title>
</head>
<body>
    
    <div class="normal">test <span>test</span></div>
    <div class="bolded">test <span>test</span></div>
    <div class="bolded sized">test <span>test</span></div>
    <hr>
    <p>Why does font weight override the height of the line-height on osx chrome?</p>
    <p>Is there a better way to handle this than setting the bolded element to have lower line-height? (it's bound to cause problems)</p>
</body>
</html>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #404040;
    padding:20px;
}

div{
    background:#dddddd;
    width:80px;
    float:left;
    line-height:18px;
}
.bolded{
    background#ddddff
}
.bolded span{
    font-weight:bold;
}
.sized span{
    line-height:17px;
}
hr{
    clear:left;
    margin:18px 0;
}