Live
x
<html> <head> <title>Box-sizing</title> </head> <style> span, div { display: inline-block; border: 2px solid red; font-size: 1.5em; margin: 10px 0; padding: 20px; } span { /* Ten element w dalszym ciągu będzie posiadał szerokość 344px i wysokość 144px */ box-sizing: content-box; width: 300px; height: 100px; } div { /* Teraz ten element będzie miał szerokość 300px łącznie z paddingiem i borderem. */ box-sizing: border-box; width: 300px; height: 100px; } </style> <body> <section> <h1>Obydwa elementy mają ustawione te same wysokości i szerokość (100px/300px)</h1> <span>content-box</span> <div>border-box</div> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.