JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="main">
    <div class="withmargin">
        sometext                            
    </div>
</div>

<div id="results">
</div>

CSS

.withmargin { margin: 20px; height: 20px; background: #ddd; }
#main { background: red; }

JavaScript

// outerHeight of innerclass -> is correct
console.log( $(".withmargin").outerHeight(true) );

// outerHeight of outerclass -> is NOT correct
console.log( 
    $("#main").outerHeight(true), 
    $("#main").innerHeight(), 
    $("#main").height(), 
    window.getComputedStyle( $("#main")[0] ).getPropertyValue("height") 
);