margin

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

<div class="center">此元素会被居中。</div>

<div class="outside">此元素会显示在包含块之外。</div>

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

margin: 5%; /* 所有边：5% 的外边距 */

margin: 10px; /* 所有边：10px 的外边距 */

margin: 1.6em 20px; /* 上边和下边：1.6em 的外边距 */
/* 左边和右边：20px 的外边距  */

margin: 10px 3% -1em; /* 上边：10px 的外边距 */
/* 左边和右边：3% 的外边距   */
/* 下边：     -1em 的外边距 */

margin: 10px 3px 30px 5px; /* 上边：10px 的外边距 */
/* 右边：3px 的外边距  */
/* 下边：30px 的外边距 */
/* 左边：5px 的外边距  */

margin: 2em auto; /* 上边和下边：2em 的外边距 */
/* 水平方向居中            */

margin: auto; /* 上边和下边：无外边距 */
/* 水平方向居中        */