tryit_yourcode See Results <!DOCTYPE html> <html> <head> <style> .content-box { box-sizing: content-box; width: 250px; height: 80px; padding: 30px; border: 5px solid #ff5722; } .border-box { box-sizing: border-box; width: 250px; height: 80px; padding: 30px; border: 5px solid #ff5722; } </style> </head> <body> <h1>CSS box-sizing Property</h1> <h2>Content-box(default):</h2> <p>Here, width and height only apply to the content of the element:</p> <div class="content-box">This div has a width of 250px. But the full width is 250px + 10px (left and right border) + 60px (left and right padding) = 320px!</div> <h2>Border-box</h2> <p>Here, width and height apply to all parts of the element: content, padding and borders:</p> <div class="border-box">Here, the full width is 250px, no matter what!</div> </body> </html>
