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").outerWidth());


//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; 

// .outerWidth() returns 274px because width = 250px; and padding = 10px (i.e., padding-left: 10px and padding-right: 10px) and border = 2px (i.e., border-left: 2px and border-right: 2px) so total 250px+10px+10px+2px+2px = 274px;. This is why it returns the value 274.


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

//parameter true means it also add the margin,border and padding. In here margin 10px (i.e., margin-left: 10px margin-right:10px). So 274px + 10px+10px =294px;