Дан фрагмент CSS-кода:
.a { width: 200px; padding: 10px; border: 2px solid black; margin: 5px; }
.b { width: 200px; padding: 10px; border: 2px solid black; margin: 5px; box-sizing: border-box; }
На сколько пикселей полная ширина по горизонтали (вместе с внешними отступами слева и справа) блока с классом a больше, чем у блока с классом b?
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- C24 px
Разбор
У блока a действует значение box-sizing по умолчанию (content-box), поэтому width задаёт только ширину содержимого. Полная ширина: 200 + 2·10 (padding) + 2·2 (border) + 2·5 (margin) = 234 px. У блока b задано box-sizing: border-box, поэтому width 200 px уже включает padding и border. Полная ширина: 200 + 2·5 (margin) = 210 px. Разность: 234 − 210 = 24 px. Вариант «34 px» получится, если ошибочно прибавить и внешние отступы, а «20 px» и «12 px» — если учесть только внутренние отступы или только одну сторону.