43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
# Нерабочие margin?
|
||
|
||
[importance 3]
|
||
|
||
В примере ниже находится блок `.block` фиксированной высоты, а в нём -- прямоугольник `.spacer`.
|
||
|
||
При помощи `margin-left: 20%` и `margin-right: 20%`, прямоугольник центрирован в родителе по горизонтали. Это работает.
|
||
|
||
Далее делается попытка при помощи свойств `height: 80%`, `margin-top: 10%` и `margin-bottom: 10%` расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал `80%` высоты родителя, а сверху и снизу был одинаковый отступ.
|
||
|
||
Однако, как видите, это не получается. Почему? Как поправить?
|
||
|
||
```html
|
||
<!--+ autorun run -->
|
||
|
||
<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>
|
||
```
|
||
|