Я путаю padding-top, margin-top и top. Моя проблема в том, что я хочу создать пространство 15px.

С margin-top: 15px это нормально, но я думаю, что это ошибка?

.subtitles{
  font-size:13px;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:  uppercase;
  text-align: center;
  margin-top: 15px;
}

Вот мой код ниже:

    header{
  background-color: #535353;
  width: 100%;
  height: 100px;
  top:  0;
  left: 0;
  display: block;
  position:  absolute;
}

.subtitles{
  font-size:13px;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:  uppercase;
  text-align: center;
  margin-top: 15px;
}

.subtiles-left{
  display: inline-block;
  padding-right: 10px; 
}

.subtiles-right{
  display: inline-block;
  padding-right:  18px;
  float: right;
}
    <header>
      <div class="subtitles">
        <div class="subtiles-left">Portofolio</div>
        <div class="subtiles-left">Languages</div>
        <div class="subtiles-right">Support</div>
        <div class="subtiles-right">Login</div>
      </div>
    </header>
css
0
aurelie

1 ответ

Это не ошибка. Вы можете использовать поле или отступ в зависимости от того, чего вы хотите достичь.

Я думаю, что поле влияет на пространство после границы, а отступы влияют на пространство внутри границы.

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

Верх обычно используется для размещения элемента по отношению к родителю, например имея стиль позиции относительной или абсолютной. Он также может иметь отрицательные значения.

margin-top в соответствии с документами MDN Web

padding-top в соответствии с документами MDN Web

по версии MDN Web Docs