JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">
    	     Hello Jquery
</div><br/><br/>

CSS

.sample{
    width: 250px;
    background-color: grey;
    color: white;
    text-align: center;
    height: 80px;
    line-height: 80px;
    padding: 10px;
    margin: 10px;
    border: 2px solid black;
}

JavaScript

//In jquery

alert("Jquery::"  + $("#firstdiv").outerHeight());

//Note that in the class sample contains the padding, margin, and border also but in outerWidth() method return the width with padding and border In the sample class padding is 10px and border is 2px; 

// .outerHeight() returns 104px because height = 80px; and padding = 10px (i.e., padding-top: 10px and padding-bottom: 10px) and border = 2px (i.e., border-top: 2px and border-bottom: 2px) so total 80px+10px+10px+2px+2px = 104px;. This is why it returns the value 104.


alert("Jquery::"  + $("#firstdiv").outerHeight(true));

//parameter true means it also add the margin,border and padding. In here margin 10px (i.e., margin-top: 10px margin-bottom:10px). So 104px + 10px+10px = 124px;