refactor 3-more into separate books

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

@@ -0,0 +1,5 @@
+Ошибка заключается в том, что `margin` при задании в процентах высчитавается *относительно ширины*. Так написано [в стандарте](http://www.w3.org/TR/CSS2/box.html#margin-properties).
+
+При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
+
+Ситуацию можно исправить, например, заданием `margin-top/margin-bottom` в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, `position` или `padding-top/padding-bottom` на родителе.

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>
+```
+