Применяется объявление height: 0;
. Если вы оставите его на height: auto;
, вы увидите разницу в 20 пикселей (высота линии с «Привет!»), Что делает ее общей высотой 100 пикселей. С высотой, установленной на ноль, она достигает всего 80 пикселей: padding-top + padding-bottom = 80px
Итак, ответ: Да, это ожидаемое поведение.
Вы можете установить ширину и высоту для любого значения между 0
и 80px
(если у вас есть 40px отступов) и по-прежнему получают одинаковые размеры.
Update: Как упоминал Харди, использование этой дополнительной опции обходит оболочку div.
HTML:
Hello!
CSS:
.div-1 {
padding: 40px;
/* This is not visible! */
border: 1px solid dashed;
}
.div-2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0px;
width: 0px;
background: red;
color: white;
overflow: hidden;
}