JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="container">
            
            <h1>Paragraph Test</h1>
            
            <!--
                This paragraph renders as three lines on the page. It should have a computed height
                of 3 * 24px (72px). Instead, the paragraph's height is 73px.
            -->
            
            <p>
                Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. 
                He's got style, a groovy style, and a car that just won't stop. When the going gets 
                tough, he's really rough, with a <a href="#">Hong Kong Phooey chop (Hi-Ya!)</a>. Hong Kong Phooey, 
                number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, 
                he's fan-riffic!
            </p>
            
            <h1>Table Test</h1>
            
            <!--
                The first td should have a height of 24px. Instead, it has a height of 25px.
            -->
            
            <table>
                <tr>
                    <td class="small">Hong Kong Phooey</td>
                    <td>Number one super guy. Hong Kong Phooey, quicker than the human eye.</td>
                </tr>
            </table>
            
            <h1>"Fixed" (via 0 line-height) Paragraph Test</h1>
            
            <p>
                Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. 
                He's got style, a groovy style, and a car that just won't stop. When the going gets 
                tough, he's really rough, with a <a class="fix" href="#">Hong Kong Phooey chop (Hi-Ya!)</a>. Hong Kong Phooey, 
                number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, 
                he's fan-riffic!
            </p>
            
            <h1>"Fixed" (via 0 line-height) Table Test</h1>
            
            <table>
                <tr>
                    <td class="small fix">Hong...

CSS

html, body, div, span, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            abbr, address, cite, code,
            del, dfn, em, img, ins, kbd, q, samp,
            small, strong, sub, sup, var,
            b, i,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, figcaption, figure, 
            footer, header, hgroup, menu, nav, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            
            body {
                line-height: 1;
            }

            article, aside, canvas, details,
            figcaption, figure, footer, header,
            hgroup, menu, nav, section,
            summary { 
                display: block;
            }
            
            a {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }

            
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            
            body {
                font-size: 16px;
                line-height: 24px;
            }
            
            #container {
                width: 800px;
                margin: 50px auto;
            }
            
            h1 {
                margin: 24px 0 0 0;
                font-size: 24px;
            }
            
            p, table {
                margin: 24px 0 0 0;
            }
            
            td {
                padding: 0 10px;
            }
            
            a, .small {
           ...

JavaScript

$('p, table').each(function() {
    $(this).after('<div class="height"> Height: ' + $(this).height() + 'px</div>');
});