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

236
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>

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

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

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

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

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

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

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

}

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

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

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

 197