JSFiddle - React, Tailwind, and code Playground

by robreact

HTML

<div class="border-box">See? Without PADDING the two boxes are identical. The answer is 300px either way</div>
<div class="content-box">And the offest is 320px; You learn nothing by asking about the margin. </div>
<div class="border-box padding">This model makes sense to me. 300px is 300px even with padding. </div>
<div class="content-box padding"><p>You've got to include padding to test whether or not someone understands the w3c box model.</p> <p>As a note: I've never liked the w3c box model. It's counter-intuitive. width: 300px + 10px of padding is a box 320px wide? Who came up with that? I want my width: to be my width:</p></div>

CSS

div {
    width:300px;
    height:150px;
    margin:10px;
    background:#ddd;
}
.padding {
    padding:10px;
}
.border-box {
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}    

.content-box {
    -moz-box-sizing:content-box;
    -ms-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

JavaScript

/*hit the results tab, yo!*/