[27/32] Сетки / Испытание: строим сетку

Курсы §15. Сетки
1

посмотрите что нужно поменять что б пройти

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="wrapper wrap1">Header</div>
        </div>
        <div class="nav">
            <div class="wrapper wrap2">Menu</div>
        </div>
        <div class="features">
            <div class="wrapper clearfix">
                <div class="collums">Promo 1</div>
                <div class="collums">Promo 2</div>
            </div>
        </div>
        <div class="content">
            <div class="wrapper clearfix">
                  <div class="collums-bot left">Left</div>
                  <div class="collums-bot main">Main</div>
                  <div class="collums-bot right">Right</div>
            </div>
        </div>
        <div class="footer">
            <div class="wrapper wrap3">Footer</div>
        </div>
    </body>
</html>




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

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
    
}
.header{
    padding: 10px 0;
    background: #34495e;
}
.wrapper{
    margin:0 auto;
    width:350px;
}
.wrap1{

    padding:5px 0 15px 5px;
    background:#c0392b;
}
.nav{
    background:#3498DB;


}
.wrap2{
    padding:5px 0 20px 5px;

}
.features{
    background:#34495e;
    padding:10px 0;

}
.collums{
    background:#c0392b;
    float: left;
    width:165px;
    padding:5px 0 40px 5px
}
.collums:last-child{
    float:right;
}
.clearfix::after{
    content:"";
    display:table;
    clear:both;
}
.content{
    padding:10px 0;
}
.collums-bot{
    background:#3498DB;
    padding:5px 0 90px 5px;
    margin-right:10px;
    float:left;
}
.left{
    width:65px;
}
.main{
    width:185px;
}
.right{
    width:65px;
    margin:0;
}
.footer{
    background:#34495e;
}
.wrap3{
    padding:5px 0 15px 5px;
}
    
    

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

А почему padding такой большой? Нужно вместо этого задавать min-height.
Ориентируйтесь по вкладке “Различия”, чтобы добиться 100%. Все ваши ошибки в несоответствии размеров блоков.
Так выглядит ваша работа сейчас:

9

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;

}
.header{
padding: 10px 0;
background: #34495e;
}
.wrapper{
margin:0 auto;
width:350px;

}
.wrap1{
min-height:30px;
background:#c0392b;
}
.nav{
background:#3498DB;

}

.features{
background:#34495e;
padding:10px 0;

}
.collums{
background:#c0392b;
float: left;
width:165px;
min-height:55px
}
.collums:last-child{
float:right;
}
.clearfix::after{
content:"";
display:table;
clear:both;
}
.content{
padding:10px 0;
}
.collums-bot{
background:#3498DB;
margin-right:10px;
float:left;
min-height: 105px;
}
.left{
width:65px;
}
.main{
width:185px;
}
.right{
width:65px;
margin:0;
}
.footer{
background:#34495e;
}
.wrap2{
min-height:30px
}
.collums-bot,.collums,.wrap2,.wrap1{
padding:5px 0 0 5px;
}

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

10

Может есть смысл задать этому правилу отдельный селектор и использовать его в html-коде сколько угодно раз? И не нужно обнулять отступы справа и снизу только потому что контентом в блоке сейчас является одна строка.

11

написать

.padding{
padding-left:5px;
padding-top:5px;
} или
.padding{
padding:5px
} и отминусовать 5px ?

12

padding: 5px; и box-sizing: border-box;
Это будет самый красивый вариант.

13

спасибо))