<body>
  <div class="a">没有设置内边距的盒子</div>
  <div class="b">上左设置了内边距,撑大了盒子宽度</div>
  <div class="c">没有设置宽度的盒子,设置内边距,不会撑大盒子</div>
</body>
* {
  margin: 0;
  padding: 0;
}

.a,
.b {
  width: 300px;
  height: 200px;
  /* 边框的样式是实线 */
  border-style: solid;
}

.a {
  border-color: red;
}

.b {
  border-color: black;
  /* 内边距左边 */
  padding-left: 20px;
  /* 内边距上面 */
  padding-top: 30px;
}

.c {
  border-color: black;
  border-style: solid;
  padding-left: 20px;
  height: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.