JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<div id="first">first - padding: 100px
  <div id="second">second<br>
  margin: 30% 0 0;<br>
  height: 120px;<br>
  </div>
</div>
<p><b>3 числа margin</b> - Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.<br><br>
<b>margin: 30% 0 0;</b><br>
30% - margin-top, который вычисляется от ширины этого же блока. Например second анимает 700px ширины, тогда margin-top будет 700/3.33333333 = 209px<br>
0 - отступ от левого и правого края<br>
0 - отступ от нижнего края
</p>
<p>На картинке мы видим серый блок first, который имеет padding 100px со всех четырех сторон. Внутри блока в контентной части написано слово "first - padding: 100px". Далее внутри first лежит second, который занимает 100% контентной ширины родительского блока first. margin-top вычисляется от нижней границы текста "first - padding: 100px". В инспекторе это видно.</p>

CSS

#first{
padding: 100px;
background: #b5bcbc;
outline: 2px solid red;
}
#second{
height: 120px;
background: #b06b48;
margin: 30% 0 0; 
outline: 2px solid red;
}