Css I'；I’我想在盒子里贴上页边空白_Css

Css I'；I’我想在盒子里贴上页边空白

css

Css I'；I’我想在盒子里贴上页边空白,css,Css,应用此代码，您可以看到它。内部框的边缘顶部应用于外部。收件箱如何才能不影响盒子 <!DOCTYPE html> <html> <head> <style> .box{ width: 400px; height: 400px; background-color: red; } .inBox{ width: 200px; height: 200px; background-color: white; margin-to

应用此代码，您可以看到它。内部框的边缘顶部应用于外部。收件箱如何才能不影响盒子

<!DOCTYPE html>
<html>
<head>
  <style>
.box{
  width: 400px;
  height: 400px;
  background-color: red;
}
.inBox{
  width: 200px;
  height: 200px;
  background-color: white;

  margin-top: 100px;
}
  </style>
  <meta charset="utf-8">
</head>
<body>
  <div class = "box">
    <div class = "inBox">
  </div>
</body>
</html>


.盒子{
宽度：400px；
高度：400px；
背景色：红色；
}
.收件箱{
宽度：200px；
高度：200px；
背景色：白色；
边缘顶部：100px；
}

不能在元素内设置边距。你可以使用填充。如果不希望填充影响长方体的侧面，请同时设置

长方体大小：边框长方体

垂直边距有一些不直观的特征，如折叠。有一些方法可以防止这种情况发生，这可能会解决您的问题。

因此您实际上可以在子元素上设置

边距顶部。正如其他人提到的，垂直边距可能会崩溃。这是一个最不直观的例子，其中孩子的边距顶部
显然正穿过父母
您可以通过向父级添加任意数量的填充来解决此问题。我添加了1倍的填充顶部
，边距突然出现了最初预期的行为：

.box{
宽度：400px；
高度：400px；
背景色：红色；
垫面：1px；
}
.收件箱{
宽度：200px；
高度：200px；
背景色：白色；
边缘顶部：100px；
}

.收件箱中有页边空白
这就是margin
的工作原理<代码>边距

将目标元素推离其父元素。你确定你没有在寻找将目标元素的内容推离元素的

填充

？