padding

padding: 1em;

padding: 10% 0;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

padding: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

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

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很大！</h3>

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

padding: 5%; /* 所有边：5% 的内边距 */

padding: 10px; /* 所有边：10px 的内边距 */

padding: 10px 20px; /* 上边和下边：10px 的内边距 */
/* 左边和右边：20px 的内边距 */

padding: 10px 3% 20px; /* 上边：10px 的内边距 */
/* 左边和右边：3% 的内边距 */
/* 下边：20px 的内边距 */

padding: 1em 3px 30px 5px; /* 上边：1em 的内边距*/
/* 右边：3px 的内边距*/
/* 下边：30px 的内边距*/
/* 左边：5px 的内边距*/