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

229
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 элемента были закрыты

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

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

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

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

}

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

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

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

 189