我在尝试将盒子保留在容器 ID 内时遇到了麻烦，但由于某种原因，它们一直在右侧重叠。我对此很陌生，所以请对我放轻松。
<!DOCTYPE html>
<html>
<head>
<title>Block-Level</title>
<style type="text/css">
#container{
/* Auto margins used for centering elements horizontally */
margin-right: auto;
margin-left: auto;
/* Box dimensions */
width: 1000px;
/* Colour of box */
background-color: #AA4639;
padding: 5px;
border-radius: 10px;
font-size: 0;
}
.box1{
width: 100%;
height: 200px;
background-color: #81BBC9;
border-radius: 10px;
display: inline-block;
font-size: 16px;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
</html>最佳答案
删除边距、侧面填充，但不删除顶部/底部。如:
/* vertical | horizontal */
margin: 5px 0;
padding: 5px 0;
查看演示:
#container {
/* Auto margins used for centering elements horizontally */
margin-right: auto;
margin-left: auto;
/* Box dimensions */
width: 500px;
/* Colour of box */
background-color: #AA4639;
padding: 5px;
border-radius: 10px;
font-size: 0;
}
.box1 {
width: 100%;
height: 200px;
background-color: #81BBC9;
border-radius: 10px;
display: inline-block;
font-size: 16px;
margin: 5px 0; /* here */
padding: 5px 0; /* here */
}<div id="container">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>关于html - 重叠的盒子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45599697/