Вопрос:

CSS иерархия для класса и тега

css overriding

5 просмотра

1 ответ

1 Репутация автора

Это очень простой вопрос. Я не понимаю, почему версия 1 кода не работает так же, как если бы я просто все добавлял в класс .container.

Большое спасибо!

.container {
display: flex;
background-color: #FF5722;

}

.container div{
margin: 10px 10px;
padding: 10px;
}

/* why isn't this the same */
.container {
display: flex;
background-color: #FF5722;
margin: 10px 10px;
padding: 10px;
}

<div class="container">
<div class="box-1">...</div>
<div class="box-2">...</div>
<div class="box-3">...</div>
</div>
Автор: Ixtan Источник Размещён: 11.08.2019 08:18

Ответы (1)


0 плюса

2323 Репутация автора

В первой версии вы добавляете margin и padding к элементам div внутри вашего контейнера, а не к самому контейнеру. Во второй версии ваши поля и отступы применяются к контейнеру. Это так просто. Стили, примененные к родительскому элементу (в данном случае к контейнеру), не применяются автоматически к дочерним элементам внутри, их необходимо устанавливать независимо.

Когда вы заявляете .container div { ... }вы ориентируетесь каждый divвнутри container, а не containerсам по себе.

Автор: Claire Размещён: 11.08.2019 08:21
Вопросы из категории :
32x32