line height experiment

by Richard Hunter

HTML

<div class='container'>
    x
    <span class='alpha'>alpha</span><!--
    --><span class='beta'>betH</span><!--
    --><span class='gamma'>Hhy</span>
</div>
<div class='container notext'>
    x
    <span class='alpha'></span><!--
    --><span class='beta'></span><!--
    --><span class='gamma'></span>
</div>

SCSS

html, body {
    height : 100%;
}
body {
    margin : 0;
    background : #ddd;
    
}
.container {
    font-size : 20px;
    width : 80%;
    margin : auto;
    margin-top : 12px;
    background : white;
    
}
.alpha { 
    background : pink; 
    font-size : 1.6em;
   vertical-align : middle;
    
}
.beta { 
    background : lightblue; 
    font-size : 5em;
    vertical-align : middle;
}
.gamma { 
    background : orange; 
    font-size : 10.2em; 
    vertical-align : middle;
}
.notext {
    > span {
        height : 1em;
        width : 200px;
        display : inline-block;
    }
    
    
}