Подключите Bluestacks к Android Studio

То, что упоминалось в @BoltClock, довольно солидно. И здесь я просто хочу добавить еще несколько решений для этой проблемы. проверьте это w3c_collapsing margin . Зеленые части - это потенциальная мысль о том, как эта проблема может быть решена.

Решение 1

Поля между плавающим полем и любым другим полем не сворачиваются (даже между float и его дочерние потоки).

, что означает, что я могу добавить float:left к #outer или #inner demo1 .

также отмечают, что float приведет к недействительности auto в поле.

Решение 2

Поля элементов, которые устанавливают контексты форматирования нового блока (например, float и элементы с «переполнением», кроме «видимых»), не сжимаются с их дочерними потоками.

кроме visible, давайте overflow: hidden в #outer. И этот путь кажется довольно простым и приличным. Мне нравится.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Решение 3

Поля абсолютно помещенных коробок не рушится (даже с их дочерними потоками).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

или

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

эти два метода нарушат нормальный поток div

Решение 4

Поля блоков inline-block не сжимаются (даже с их дочерьми в потоке).

совпадает с @enderskill

Решение 5

Нижний край элемента уровня блока в потоке всегда сворачивается с верхним краем его следующего дочернего узла на уровне блока в потоке, если только у этого брата нет разрешения.

Это не так много, что нужно сделать с вопросом, поскольку это разваливающийся запас между братьями и сестрами. обычно это означает, что в верхней коробке есть margin-bottom: 30px, а в сиблок - margin-top: 10px. Общий запас между ними равен 30px вместо 40px.

Решение 6

Верхнее поле элемента блока потока в потоке сворачивается с его первым входом,

Это очень интересно, и я могу просто добавить одну верхнюю пограничную линию, если элемент не имеет верхней границы, нет верхнего заполнения, а у ребенка нет разметки.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

И также

является блочным уровнем по умолчанию, поэтому вам не нужно декларировать его специально. Извините, что не смог опубликовать более двух ссылок и изображений из-за моей репутации новичка. По крайней мере, вы знаете, где проблема возникает в следующий раз, когда вы видите нечто подобное.