Padding или Margin для расширения фонового изображения до верхней части области просмотра?

Question

Я пытался добиться, чтобы фоновое изображение моего заголовка достигло верхней части области просмотра. Между верхней частью моего изображения и верхней частью области просмотра был зазор, и я хотел это исправить. Я попытался применить запас к моему <header> css, но ничего не помогло. Что ДЕЙСТВИТЕЛЬНО работало, так это применение отступов.

 header {
      text-align: center;
      background: url("https://i.imgur.com/E4yIQba.jpg");
      background-size: cover;
      color: white;
      padding: 1px 0px 0px 0px;

    }

Сейчас все выглядит хорошо, но знает ли кто-нибудь, почему добавление 1px PADDING в верхнюю часть изображения решило проблему, при попытке добавить MARGIN в 0px (margin: 0px 0px 0px 0px) сделали ничего? Я думал, что поля должны сдвигать элементы ближе и дальше от краев видовых экранов. Я удивлен, что мою проблему решило заполнение вместо поля. Спасибо!

https://dash.generalassemb.ly/docmp0/build-your-own-blog-theme

Answer 1

На самом деле поля считаются находящимися за пределами элемента, а margin смежных элементов будут перекрываться, но, с другой стороны, padding считаются находящимися внутри элемента. Таким образом, действительно, область padding элемента - это пространство между его содержимым и его границей, когда область элемента margin - это пространство между этим элементом и элементами вокруг него.

Давайте посмотрим на это на примере.

div.container {
  display: flex;
  justify-content: space-between;
}

div.box>div {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  text-align: center;
}

div.padding>div {
  padding-top: 1rem;
}

div.margin>div {
  margin-top: 1rem;
}

<div class="container">

  <div>
    <h3>Default</h3>
    <div class="box">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>

  <div>
    <h3>padding-top: 1rem;</h3>
    <div class="box padding">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>

  <div>
    <h3>margin-top: 1rem;</h3>
    <div class="box margin">
      <div>box A</div>
      <div>box B</div>
      <div>box C</div>
    </div>
  </div>
</div>

Итак, как вы можете видеть в примере, добавление padding в каждое поле приведет к их увеличению в области padding, это будет работать так же для изображений.

Считайте следующее изображение блоком содержимого, всякий раз, когда вы добавляете отступы, оно будет применяться к самой внутренней части блока, а всякий раз, когда вы добавляете поля, оно будет применяться к самой внешней части блока.

ПРИМЕЧАНИЕ: Подробнее о padding и margin .