Tre värden i margin-egenskapen i CSS

Nå, och slutligen, om du anger egenskapen margin tre värden, så kommer det första att sätta marginal överst, det tredje - marginalen nedtill, och det andra - samtidigt marginal till vänster och höger.

Låt oss titta på ett exempel:

html<div id="parent">
  <div id="child"></div>
</div>
css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 10px 20px 30px;
}

Результат:

Задание 1

Upprepa sidan enligt detta mönster:

Задание 2

Upprepa sidan enligt detta mönster: