Испытание: макет-прототип [15/15] зачем нужны пустые css правила

Курсы §7. [Архив] Знакомство с CSS
1

Я прошел это испытание на 100%, но одного понять не могу

зачем нужны эти пустые правила? при их удалении весь макет съезжает, я не могу понять почему так происходит

вот код
/* Общие стили для документа и бо */

body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
}

.contacts,
.about-us,
.main-menu,

.footer {
padding: 10px 20px 10px 20px;
background-color: #f5f5f5;
border: 2px solid #cccccc;
}

/* Собственные стили блоков */

.header {
min-height: 40px;
margin-bottom: 20px;
}

.logo {
background-color: #333333;
padding: 10px;
border: 2px solid #cccccc;
font-weight: bolder;
color: white;
float: left;
width: 250px;
text-align: center;
}

.contacts {
border: 2px solid #cccccc;
font-style: italic;
color: #ffffff;
background-color: #333333;
float: right;
width: 110px;
text-align: center;
}

.about-us {
float: left;
width: 230px;
margin-bottom: 20px;
}

.about-us h1 {
font-size: 20px;
}

.about-us p {
font-size: 12px;
}

.main-menu {
float: right;
width: 110px;
}

.footer {
color: #ffffff;
background-color: #333333;
clear: both;
}

и еще, когда я пытаюсь из первого footer перенести селекторы со значениями во второй, почему то начинает изменяться элемент с классом about-us

2 
.contacts,
.about-us,
.main-menu,
.footer {
    padding: 10px 20px 10px 20px;
    background-color: #f5f5f5;
    border: 2px solid #cccccc;
}

Свойства в фигурных скобках применяются не только к .footer, но и ко всем классам, перечисленным через запятую. Здесь все четыре класса не пустые, а с одинаковыми свойствами.
(класс .logo из этого списка исключать было не обязательно )

(насколько я понял Вы переносили не селекторы, а свойства)
Когда Вы переносите свойства из первого .footer во второй, – остальные три класса остаются без этих свойств… становятся действительно пустыми.

1 лайк
3

спасибо, теперь все понял