Итоговая ширина блока с внутренними отступами и рамкой
Глобальный сброс стилей в проект не подключён.
.card {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
}
Сколько места по горизонтали займёт карточка и как получить ровно 300px вместе с отступами и рамкой?
- 300px; внутренние отступы и рамка по умолчанию входят в заданную ширину, менять ничего не нужно.
- 340px; в занимаемую ширину входят только внутренние отступы, а рамка рисуется поверх содержимого и на размер блока не влияет.
- 342px; чтобы уложиться в 300px, нужно задать box-sizing со значением border-box.
- 342px; единственный способ получить ровно 300px — вручную уменьшить значение width до 258px, отступы и рамку из ширины исключить нельзя.