Нерабочие margin?

[importance 3]

В примере ниже находится блок .block фиксированной высоты, а в нём -- прямоугольник .spacer.

При помощи margin-left: 20% и margin-right: 20%, прямоугольник центрирован в родителе по горизонтали. Это работает.

Далее делается попытка при помощи свойств height: 80%, margin-top: 10% и margin-bottom: 10% расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал 80% высоты родителя, а сверху и снизу был одинаковый отступ.

Однако, как видите, это не получается. Почему? Как поправить?

<!--+ autorun run  no-beautify -->
  
<style>
  .block {
    height: 150px;

    border: 1px solid #CCC;
    background: #eee;
  }

  .spacer {
    margin-left: 20%;
    margin-right: 20%;

*!*   
    height: 80%;
    margin-top: 10%;
    margin-bottom: 10%;
*/!*

    border: 1px solid black;
    background: #FFF;
  }
</style>
 
<div class="block">
  <div class="spacer"></div>
</div>

1.3 KiB Raw Blame History Unescape Escape

Нерабочие margin?

1.3 KiB

Raw Blame History