Когда высота div указана в процентах и маржа одинаков, маржа вдвое превышает размер высоты. Это делает маржу, составляющую половину значения высоты, одинаковой. Почему это?Почему высота div равна половине размера поля
.test {
height: 5%;
margin-top: 2.5%;
outline: black solid 1px;
}<div class="test">Test 1</div>Это, как это определено в спецификации, проценты, которые вы использовали не на основе того же происхождения:
Процент рассчитывается по отношению к ширине сгенерированный блок, содержащий блок. Обратите внимание, что это верно для «margin-top» и «margin-bottom».
http://www.w3.org/TR/CSS2/box.html#margin-properties
Так что, если вы какой-то запас в процентах, это будет относиться к шириной родителя, а не высота:
div {
width: 200px;
height: 5px;
background: crimson;
margin-top: 25%;
}<div></div>Как уже упоминалось в комментариях, использование вариантов просмотра будет лучшим вариантом здесь.
Ваш div не будет использовать процентную высоту, если только родительский div не имеет указанной высоты. В вашем примере нет 5% -ной высоты, так как у нее нет ничего, чтобы обосновать ее относительно. – Lee
Gotcha, мой браузер показывал его так, как я предполагал, в то время как JSFiddle не будет. Каков наилучший способ указать 5%, не используя что-то вроде окна просмотра (просто чтобы не иметь дело с полосами прокрутки)? –
Viewport не повлияет на вашу высоту, и я не понимаю, что именно вы пытаетесь сделать. Почему в любом случае вам нужно использовать значения высоты в процентах? – Lee