Сбивается отступ от внешнего блока если убрать границу (html-вёрстка)

305

20 декабря 2021, 19:20

.outer {
    border: 1px solid black;
    width: 1200px;
    height: 700px;
}
.inner {
    border: 1px solid red;
    width: 1200px;
    height: 400px;
    margin-top: 300px;
}
<div class="outer">
    <div class="inner"></div>
</div>

Я пытаюсь сделать margin-отступ от внешнего блока .outer. Если прописать границу блоку .outer, то всё работает корректно. Но если границу (border) убрать, то блок .outer сам сдвигается вниз до уровня .inner. Не могу понять, в чём причина такого поведения. Подскажите, пожалуйста!

Answer 1

Как вариант - оставьте границу, но сделайте её прозрачной (вместо black напишите transparent):

.outer { 
    border: 1px solid transparent; 
    width: 1200px; 
    height: 700px; 
} 
 
.inner { 
    border: 1px solid red; 
    width: 1200px; 
    height: 400px; 
    margin-top: 300px; 
}

<div class="outer"> 
    <div class="inner"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Меню аккордеон, как закрыть активный пункт меню?

Есть меню типо аккордеона, нужно сделать что бы открытый пункт можно было закрыть, то есть что бы 2 элемента были закрыты

386

HTML

HTML. появление блоков при наведении на блок и исчезновение при выходе из всех блоков

411

Java

Какие проблемы присутствуют в данном коде и как его улучшить?

}

209

Java

Использование VBO в LibGdx

подскажите, как использовать VBO в libgdx? У меня проблема, что есть персонаж с костями, и их должно быть много, и проседает fps, и хотел бы ускорить...

269