PNLdev
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
En
English
فارسی
En
English
فارسی
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
Run
<!DOCTYPE html> <html> <head> <style> #example1 { box-sizing: content-box; width: 250px; height: 100px; padding: 30px; border: 20px solid red; } #example2 { box-sizing: border-box; width: 250px; height: 100px; padding: 30px; border: 20px solid red; } </style> </head> <body> <h1>box-sizing property example</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 250px. But the full width is 250px + 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 2500px, no matter what!</div> </body> </html>
