为什么不
Three DIVS 前两个块 第三内联 第三个包含 4 个嵌套的内联 DIV
如果我向第三个内联或 4 个嵌套内联 DIV 中的任何一个添加任何填充，它们都会渲染到第二个块 DIV 中。
我已经阅读了边距折叠，但给定边距：0px所有元素似乎都不相关。 当然是众所周知的，但我无法发现行为记录在哪里。
感谢您的任何知识/指示。
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
display: inline;
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 0px;
display: inline;
}
/* https://www.sitepoint.com/collapsing-margins/ */<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>您的mainContent是内联的，但有填充，这会导致问题。尝试将类设置为mainBoxes类 CSSdisplay: inline-block;可能会解决它。inline-block元素类似于内联元素，不同之处在于它们可以在所有四个边上添加填充和边距。
有关inline和inline-block之间的区别：请参阅此处的文档
内联块。 该元素生成一个块元素框，该框将与周围的内容一起流动，就好像它是一个内联框一样(行为与替换的元素非常相似)。
但是，您可能还需要更新mainContent类的样式。display:inline似乎没有必要，我把它注释掉了。
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
/*display: inline;*/
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 0px;
display: inline-block;
}
/* https://www.sitepoint.com/collapsing-margins/ */<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>为什么不display: flex呢？
只需在#mainContent上使用display: flex，然后在.mainBoxes上删除display: inline。
现在，您可以在框上使用边距和填充。
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
display: flex; /*or inline-flex*/
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 8px;
/*display: inline;*/
}
/* https://www.sitepoint.com/collapsing-margins/ */<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>