Разместил все блоки по местам. Итого 92%. Но не было паддингов вообще. Т.е. текст в блоках начинался грубо в притык к колонке вверху-слева. Начал равнять отступы внутренние. Так и не получилось добиться результата. Итого 90%. Хотя внешний вид стал лучше, а проценты только уменьшились. И также не понимаю, почему мой блок Header не отодвигался мэрджином от верхнего края контейнера, в котором находился, пока я не задал контейнеру padding-top:1px. Тогда появился отступ. И в основном приходилось пользоваться отступами в 1px. Т.к. 5px было уже перебор. Хотя и с 1-им был перебор. Никак не могу понять, в чём причина. В условии ведь написано, что все отступы кратны 5-и.
Объясните пожалуйста подробней, в чём мои ошибки. И желательно простыми словами, т.к. я ещё нуб:) В заранее благодарю!)
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class="header-menu clearfix">
<div class="header">
<p>Header</p>
</div>
<div class="menu">
<p>Menu</p>
</div>
<div class="promo1">
<p>Promo 1</p>
</div>
<div class="promo2">
<p>Promo 2</p>
</div>
</div>
<div class="features">
<div class="left">
<p>Left</p>
</div>
<div class="main">
<p>Main</p>
</div>
<div class="right">
<p>Right</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</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-menu{
background:#34495e;
margin-bottom:10px;
padding-bottom:10px;
padding-top:1px;
}
.header{
background:#c0392b;
width:345px;
margin:0 auto;
height:35px;
padding-left:5px;
padding-top:1px;
margin-top:10px;
margin-bottom:10px;
}
.menu{
background:#3498DB;
min-height:30px;
padding-left:55px;
padding-top:1px;
}
.promo1{
background:#c0392b;
float:left;
width:165px;
margin-left:50px;
min-height:60px;
padding-left:5px;
}
.promo2{
background:#c0392b;
float:right;
width:165px;
margin-right:50px;
min-height:60px;
padding-left:5px;
}
.features{
background:#fff;
}
.left{
background:#3498DB;
float:left;
width:65px;
min-height:110px;
margin-right:10px;
margin-left:50px;
padding-left:5px;
}
.main{
background:#3498DB;
float:left;
min-height:110px;
width:185px;
margin:0 auto;
padding-left:5px;
}
.right{
background:#3498DB;
float:right;
width:65px;
min-height:110px;
padding-left:5px;
margin-right:50px;
}
.footer{
background:#34495e;
min-height:40px;
clear:both;
margin-top:130px;
padding-left:55px;
padding-top:1px;
}
.clearfix::after{
content:"";
display:table;
clear:both;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
Не понимаю, почему не отображается html код ?впишите текст сюда; также, отключить форматирование текста можно, начав строку с четырех пробеловвпишите текст сюда; также, отключить форматирование текста можно, начав строку с четырех пробелов
