Задал блоку width и height, а он всё равно не того размера. Как правильно задавать ширину и высоту?
Пишу width: 200px; height: 100px; блоку, а на экране он получается шире 200px. Что не так с размерами и как их задавать правильно?
2 ответа
Скорее всего у блока есть padding или border, и по умолчанию они добавляются к ширине. То есть width: 200px + padding: 20px с двух сторон = реально 240px на экране.
Чинится одной строкой:
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
}
С border-box браузер считает, что 200px — это итоговая ширина вместе с padding и border, а содержимое просто ужмётся внутри. Это интуитивно правильное поведение, его обычно включают для всех элементов сразу:
* { box-sizing: border-box; }
Ещё нюанс: у блочного элемента (div) высота по умолчанию подстраивается под содержимое, а ширина растягивается на всю строку. width/height фиксируют это. А вот у строчных (span) задать ширину/высоту просто так не выйдет — нужно сначала display: block или inline-block.