TAG
CSS
JavaScript
Result
Run
License
<h3>box-sizing: content-box</h3> <div id="box1" class="box"></div> <h3>box-sizing: border-box</h3> <div id="box2" class="box"></div>
.box { width: 300px; height: 60px; border: 10px solid #CCC; padding: 10px; } .box:nth-child(2) { box-sizing: border-box; }
window.addEventListener("load", function() { const elBox1 = document.querySelector("#box1"); elBox1.textContent = `offsetHeight: ${elBox1.offsetHeight}`; const elBox2 = document.querySelector("#box2"); elBox2.textContent = `offsetHeight: ${elBox2.offsetHeight}`; });
Console
expand_less
License
License
by DevDic
Close