这个问题在这里已有答案：
我有一个父元素（div），其固定宽度为1200px。此元素没有边框或填充。
我有三个内联子元素（div），固定宽度为400px。同样，没有边框，填充或边距。
我希望我的三个子元素位于同一条线上，而第三条元素则被推下。如果我将它们的宽度减小到397px，它们都会坐在同一条线上。
为什么我不能将父容器的宽度精确地除以我想要在该容器中并排的子数？与我无法将这些子元素定义为百分比宽度（加上100％）（即所有25％宽度的四个子元素）的方式大致相同？
这是由于代码本身中的空白空间导致的额外间距。您可以通过以确保没有空格的方式编写标记来修复它，或者您可以将父级div的font-size设置为0，这样就不会显示空白区域（请确保将子项div字体的大小设置为正常）
在这个例子中，我使用了第一种方法，因为它更干净
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div><div class="child"></div><div class="child"></div>
</div>
样式
.parent {
width: 1200px;
background-color: #333;
margin: 20px 0; /* outer margin doesn't matter */
}
.parent .child {
width: 400px;
height: 300px;
display: inline-block;
background-color: #ccc;
}
第一个框不起作用，第二个框不起作用，因为我在子元素的结束标记和开始标记之间没有留空间
你需要使用float:left给你的孩子，以实现这一目标
.parent {
width: 1200px;
height: 200px;
background: pink;
}
.child {
float: left;
width: 400px;
display: inline-block;
background: red;
}<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
</div>你可以像这样添加css =>
.parent_container{
width:1200px;
float:left;
}
.child1,
.child2,
.child3{
float:left;
width:400px;
display: inline-block;
}
inline-block元素（我猜你正在使用它），默认情况下，它们后面有一个空格，这可能会导致你看到的问题。在html本身中有很多方法可以删除它，其中一种方法是在两个内联块元素之间添加注释。我更喜欢这种方法，因为它更具可读性。
.parent {
width: 600px;
height: 50px;
background: grey;
}
.child {
display: inline-block;
width: 200px;
height: 50px;
background: pink;
}<div class="parent">
<div class="child">1</div><!--
--><div class="child">2</div><!--
--><div class="child">3</div>
</div>你也可以在同一行开始div，如下所示，放弃评论
<div>content</div><div>
content</div
有很多解决方案我更喜欢flexbox
.parent {
display: flex;
}
.child {
flex:1 1 400px;
background-color:red;
max-width: 400px;
height: 400px;
}<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>如果你真的想和inline-block一起使用，可以将font-size:0;设为父级，或者在创建子元素时不要更改该行
.parent{
width:1200px;
}
.child {
background-color:red;
width: 400px;
height: 400px;
display: inline-block;
}<div class="parent">
<!-- Do Not change line of children-->
<div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>请阅读详细信息https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just Give Parent Div Font Size 0px以下是代码，
您也可以通过float Left做同样的事情但这是最好的方式:)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.contaniner {
width:1200px;
font-size: 0px;
}
.threelock {
background: #000;
width: 400px;
height: 400px;
display: inline-block;
}
.yllow {
background: yellow;
}
.red {
background: red;
}
</style>
<body>
<div class="contaniner">
<div class="threelock"></div>
<div class="threelock red"></div>
<div class="threelock yllow"></div>
</div>
</body>
</html>