Как применить дополнение из оболочки класса div, но не к заголовку

#html #css

#HTML #css

Вопрос:

У меня есть этот стиль для обертки div

css

 .wrapper {
   padding-left: 2rem;
   padding-right: 2rem;
   width: 960px;
}
header {
  width: 100%; //that means it inherits the paddings
  background-color: red; 
}

но я не хочу применять его к заголовку

HTML

 <div class="wrapper">
  <header>
    -Link
    -Link
    -Link
  </header>
</div>

Есть ли лучший способ? Я попробовал первый дочерний элемент и псевдокласс not, он не работает. Я пытаюсь распространить заголовок на 100% от оболочки, чтобы применяемый цвет на 100% соответствовал его родительскому элементу, в данном случае оболочке.

редактировать: исправлена демонстрация

Спасибо!

Ответ №1:

Вы можете отменить заполнение, установив отрицательные поля таким образом:

 .wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
    width: 960px;
}
.header {
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: red; 
}

Ответ №2:

Вы можете установить заголовок position: absolute . Также header класс не существует.

 .wrapper {
   padding-left: 2rem;
   padding-right: 2rem;
   width: 960px;
   position: relative;
}

header {
  width: 100%;
  background-color: red;
  position: absolute;
  left: 0;
}

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

2. Это действительно зависит от того, какие проблемы может вызвать каждое решение, есть много способов подойти к этому.

3. Да, я решил это, добавив классы там, где это необходимо. Просто потому, что мне нужно было быстрое решение.

Ответ №3:

Вы можете просто рассмотреть box-shadow для окрашивания внешней части:

 .wrapper {
  padding:10px 2rem;
  border:2px solid green;
  background:#f2f2f2;
}

header {
  background-color: red;
  box-shadow:
     -2rem 0 0 0 red,
     2rem 0 0 0 red;
}

 <div class="wrapper">
  <header>
    -Link -Link -Link
  </header>
</div>

Ответ №4:

Первый метод

Лучшее решение — `Relative` позиционирование заголовка

Добавьте относительное позиционирование в заголовок

 header {
  background-color: red;
  position:relative;
  left:-2rem;
  right:-2rem;
  padding: 0 2rem;
  width: 100%;
}

 body{
  margin:0;
}
.wrapper{
   padding-left: 2rem;
   padding-right: 2rem;
   width: 960px;
}
header {
  background-color: red;
  position:relative;
  left:-2rem;
  right:-2rem;
  padding: 0 2rem;
  width: 100%;
}

 <div class="wrapper">
  <header>
    -Link
    -Link
    -Link
  </header>
  Wrapper
</div>

Второй метод — добавить отрицательный `margin`

Вместо добавления отрицательного отступа вы можете использовать отрицательный запас

 header {
  background-color: red;
  margin:0 -2rem;
}

рабочая демонстрация

 body{
  margin:0;
}
.wrapper{
   padding-left: 2rem;
   padding-right: 2rem;
   width: 960px;
}
header {
  background-color: red;
  margin:0 -2rem;
}

 <div class="wrapper">
  <header>
    -Link
    -Link
    -Link
  </header>
  Wrapper
</div>

1. вы хотите вот так 🙂

2. Так что да… Обычно мне не нравится добавлять поля по всему коду, я использую только отступы, потому что это нарушает код. Я добавил класс заполнения везде, где это необходимо. Но должно быть более чистое решение.

3. Вы можете выбрать первый метод более гибким @Becky Beck?

4. Спасибо, но это портит мой заголовок.