Help! не смог разобраться с испытанием [27/32]


#1

Help! не смог разобраться с испытанием [27/32], не срабатывает верхний отступ.

не бросайте готовые ответы просто подскажите в каком направлении двигаться и насколько правильный код, заранее спасибо :slight_smile:

Испытание: строим сетку
Header
Menu
    <div class="promo">
    <div class="promo1">
    Promo 1
    </div>
    
    <div class="promo2">
        Promo 2
    </div>
    </div>
    </div>
    </div>
    
    <div class="positioner">
        
    <div class="Left">
    Left
    </div>
    <div class="layout-Main">
    Main
    </div>
    <div class="right">
    Right
    </div>
    </div>
    <div class="Footer">
        <div class="positioner">
    Footer
    </div>
    </footer>
</body>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header{
background: #34495e;

}
.positioner{
width: 350px;
margin: auto;

}

.positioner::after{
content: “”;
display: table;
clear: both;
}

.main-navigation{
width: auto;
background: #3498DB;
min-height: 25px;
padding: 5px;
margin-bottom: 10px;
padding-left: 15px;

}
.layout-header{
background: #c0392b;
min-height: 25px;
width: 340px;
margin: 10px auto;
padding: 5px;
}
.promo1{
width: 160px;
background: #c0392b;
padding: 5px;
min-height: 50px;
float: left;
margin-bottom: 10px;
}
.promo2{
width: 160px;
background: #c0392b;
padding: 5px;
min-height: 50px;
float: right;
}
.Left{
background: #3498DB;
width: 60px;
height: 100px;
float: left;
margin-right: 10px;
padding: 5px;
margin-top: 10px;
}

.layout-Main{
background: #3498DB;
width: 180px;
height: 100px;
float: left;
padding: 5px;
margin-top: 10px;
}
.right{
background: #3498DB;
width: 60px;
height: 100px;
float: right;
padding: 5px;
margin-top: 10px;
}

.Footer{
background: #34495e;
margin-top: 10px;
min-height: 30px;
padding: 5px;
padding-left: 15px;

}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/


#2

У вас на скрине в браузере открыта вкладка “Выпадание внешних отступов”. Как раз по этой причине сверху получается белая полоса.
В целом код неплох, только почему-то три колонки имеют фиксированную высоту, а все остальные блоки минимальную высоту, как нужно.


#3

Спасибо за помощь будем трудиться)


#4

Не работает свойство margin-bottom. Подскажите альтернативу


#5

Не может быть такого, покажите код.