margin-top ребенка отталкивает родителя, а не отталкивается сам

Question

Почему в данном примере если задать margin-top списку, то отталкивается весь div.block, а не сам список отталкивается от верхней границы div.block?

https://jsfiddle.net/ru2t80s3/

.wrapper {
  border: 1px red solid;
}

.block {
  background-image: url(https://s.ill.in.ua/i/news/630x373/440/440217.jpg);
}

ul {
  padding: 0px;
  margin-top: 15px;
  margin-bottom: 0px;
}

<div class="wrapper">
  <div class="block">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    Текст Текст Текс Текст
    <br> Текст Текст Текс Текст
    <br> Текст Текст Текс Текст
  </div>
</div>

В то же время у меня есть аналогичный (как мне кажется) пример, где все отталкивается так, как я ожидаю:

Answer 1

.wrapper {
  border: 1px red solid;
}

.block {
  background-image: url(https://s.ill.in.ua/i/news/630x373/440/440217.jpg);
  position: fixed;
  width: 100%;
  height: 100%;
}

ul {
  padding: 0px;
  margin-top: 15px;
  margin-bottom: 0px;
}

<div class="wrapper">
  <div class="block">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    Текст Текст Текс Текст
    <br>
    Текст Текст Текс Текст
    <br>
    Текст Текст Текс Текст
  </div>
</div>

БЛОГ НА HUSL

margin-top ребенка отталкивает родителя, а не отталкивается сам

Ответы (1 шт):