JSFiddle - React, Tailwind, and code Playground

by Leo Lanese

HTML

<p>Picture = 250px</p>
<img src="http://leolanese.com/spainjs/img/3g.jpg" width="250" height="250" alt />

<div class="boxmodel">My total width = 250px</div>

CSS

.boxmodel {
    width:220px; /* make it 250px and use the box-sizing property */
    padding:10px;
    border:5px solid #000;
    margin:0px;
}

/*
* { 
        box-sizing: border-box; /* Opera/IE8+ */
   -moz-box-sizing: border-box; /* Firefox, other Gecko */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */      
} 
*/

JavaScript

/*
CSS Box Model:
width of the box   = content width  + padding + border + margin (not visible)
height of the box  = content height + padding + border + margin (not visible)

  250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
---------------------
= 300px width of the box

Browsers Compatibility Issue:
<=IE8, included 'padding' and 'border' in the width property.


What is the "width":
We need to have an agreement about: What is the "width"

box-sizing:
Moves the 'border' and 'padding' values inside

Alternative fix:
To fix this problem, add a <!DOCTYPE html> to the HTML page.

*/