refactor 3-more into separate books

12-css-for-js/11-margin/1-failing-margins/task.md

@@ -0,0 +1,43 @@
+# Нерабочие 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>
+```
+