x
<html><head><style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;}#example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;}</style></head><body><h1>The box-sizing Property</h1><p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p><h2>box-sizing: content-box (default):</h2><p>Width and height only apply to the content of the element:</p><div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div><h2>box-sizing: border-box:</h2><p>Width and height apply to all parts of the element: content, padding and borders:</p><div id="example2">Here, the full width is 300px, no matter what!</div></body><!-- Mirrored from www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 03:00:45 GMT --></html>