百分比布局中内外边距怎么设置

在百分比布局中，内外边距的设置同样可以使用百分比。不过需要注意，百分比的计算是相对于父元素的宽度来计算的。

比如，假设父元素的宽度为600px，我们想让子元素的内边距为父元素宽度的10%，即60px。可以这样设置：

.parent {
  width: 600px;
}

.child {
  padding: 10%;
}

同样的道理，可以使用百分比设置外边距。比如，如果要让子元素的上外边距为父元素宽度的5%，可以这样设置：

.child {
  margin-top: 5%;
}

需要注意的是，如果父元素的宽度是根据浏览器窗口大小自适应的，那么内外边距也会随之自适应。

相关问题

css html让盒子里的卡片内外边距加上卡片的宽度不超过盒子宽度100%，如何布局

可以使用CSS的`box-sizing`属性来控制盒模型的大小计算方式，将其设置为`border-box`可以使内外边距和边框计算在盒子的总宽度内。然后可以使用`flexbox`来布局卡片，通过设置`flex-wrap`属性为`wrap`可以让卡片在一行排不下时自动换行。最后，可以将卡片的宽度设置为百分比，并根据需要调整卡片内外边距的大小，以确保卡片的宽度加上内外边距不超过父元素的100%。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  box-sizing: border-box;
  width: 30%; /* 设置卡片宽度为30% */
  margin: 1%; /* 设置卡片外边距为1% */
  padding: 10px; /* 设置卡片内边距为10px */
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

这样就可以实现卡片内外边距加上卡片的宽度不超过盒子宽度100%的布局效果。