Блоки в html не уменьшается до 0%
Почему когда блоку задаёшь высоту 0% или же px они не уменьшается до 0 почему так происходит? И как это сделать или реализовать по другому.
Ответы (2 шт):
Вы можете уменьшить значения до нуля и на скриншотах видно, как изменилась высота блока (до изменения высоты) и (после изменения высоты)
Ссылка на скриншоты: https://drive.google.com/drive/folders/1Ksd013OyA8_7CEbPjMHC1pLRm-e7sITu?usp=sharing
Факторы
Фактор 1
Свойство padding и ему подобные
Такие свойства как padding, padding-bottom, padding-top не зависят от свойства height, а само оно увеличивает размер элемента, вот пример:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 0;
padding: 25px;
background: red;
}
<div></div>
Фактор 2
Свойство min-height указывает минимальную высоту и не зависимо от height всё равно будет указывать высоту элемента. (Если она меньше чем высота которую вы указываете в height)
Пример с min-height:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 0;
min-height: 25px;
background: red;
}
<div></div>
Фактор 3
Вы случайно могли указать селектор который, также подходит под элемент, который вы создали.
Вот пример:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 0;
background: red;
}
body > div {
height: 25px;
}
<div></div>
Фактор 4
Атрибут controls, он указывает, будет ли у элемента <video> показываться управление, вот пример (Не знаю как у вас, а у меня управление видно, оно, собственно говоря, занимает какую-то высоту экрана):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 0;
background: red;
}
<video controls=""></video>
Фактор 5
Инлайн-стили, если вы попытались указать в своих CSS стилях пропорции различные от инлайн-стилей, допустим поменять height: 25px; на hieght: 0px, то тогда так не выйдет, т.к. инлайн-стили всегда по приоритету выше чем обычные CSS стили, для того чтобы обойти инлайн-стили, можно дописать в конце значения пропорции !important и тогда она станет приоритетнее чем ваш инлайн-стиль, но точно также может быть указанно в инлайн-стилях (в смысле !important), так что будьте осторожны. Вот пример:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 0;
background: red;
}
/* Решение */
div {
height: 0 !important;
}
<div style="height: 25px;"></div>
Итог
Таких факторов может быть ещё больше, без конкретного кода не понятно, но я вроде бы озвучил довольно популярные причины по которой может произойти ваша проблема. Смотрите и изучайте :)