JSFiddle - React, Tailwind, and code Playground

by Goin

HTML

<div class="myClass">
        <p>XXX</p>
        <p>YYY</p>
        <p>ZZZ</p>
    </div>
    <div class="myClass2">
        <p>UUU</p>
    </div>

CSS

p {
    display:block;
    margin-bottom: 1em;
    margin-left:0;
    margin-right:0;
    margin-top: 1em;
}

JavaScript

function height () {
    console.log("\t" + jQuery(".myClass").height());
    console.log("\t" + jQuery(".myClass").innerHeight());
    console.log("\t" + jQuery(".myClass").outerHeight());
    console.log("\t" + jQuery(".myClass").outerHeight(true));
}

function initial () {
    jQuery("div.myClass").css("border", "");
}

/* The value of the height dependence with the border rule. */

/* In this case the height ignores the margin top of the 
   first p (XXX) and the margin bottom of the last p (ZZZ) */
console.log("Height without border:");
jQuery("div.myClass").css("border", "");
height();

/* In this case the height does not ignore the margin top of the 
   first p (XXX) and the margin bottom of the last p (ZZZ) */
console.log("Height with border:");
jQuery("div.myClass").css("border", "1px solid red");
height();

setTimeout(initial, 5000);

/* I want to know some way to get the real height in this case this height
would be: the height (without border) + the margin top. I don't add the margin
bottom because this is underhand with the margin top of the myClass2.p:first */