Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .div1 { box-sizing: content-box; width: 400px; height: 50px; padding: 50px; border: 5px double #1c87c9; } .div2 { box-sizing: border-box; width: 400px; height: 50px; padding: 50px; border: 5px dashed #8ebf42; } </style> </head> <body> <h2>Пример box-sizing</h2> <hr /> <h3>box-sizing: content-box (по умолчанию):</h3> <div class="div1">Толщина этого div элемента установлена на 400px. Таким образом, общая толщина получится 400px + 10px (левая и правая граница) + 100px (левый и правый отступ) = 510px.</div> <br> <h3>box-sizing: border-box:</h3> <div class="div2">Толщина и высота применяются ко всем частям div элемента:общая толщина - 400px.</div> </body> </html>