Пояснення тегів CSS - box-sizing
Синтаксис: box-sizing: content-box | border-box | padding-box | inherit
Свойство box-sizing визначає алгоритм розрахунку ширини та висоти елемента.
Значення:
- content-box: ширина та висота враховують тільки контент, не включаючи відступи, поля та границі.
- border-box: ширина та висота включають в себе поля та границі, але не відступи.
- padding-box: ширина та висота включають в себе поля, але не відступи та границі.
- inherit: наслідує значення батька.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>
.box1 {
background: #f0f0f0;
width: 300px;
padding: 10px;
border: 2px solid #000;
}
.box2 {
background: #fc0;
width: 300px;
padding: 10px;
margin-top: 10px;
border: 2px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">Ширина з урахуванням контенту, полів та границь.</div>
<div class="box2">Ширина відповідає значенню свойства width.</div>
</body>
</html>Браузери
Firefox підтримує властивість -moz-box-sizing.
Internet Explorer, Chrome, Opera та Safari не підтримують значення padding-box.