关于CSS布局的问题，请问为什么这两个箱子不在同一行？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.outer{
width:500px;
height: 500px;
background: green;
}
.outer>div{
display: inline-block;
}
.inner1{
width:48%;
height:48%;
margin: 0 1%;
background: powderblue;
}
.inner2{
width: 48%;
height: 48%;
margin: 0 1%;
background: blue;
}
</style>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>这样加起来不正好每个百分之50么，感觉应该在一行才对啊
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
因为用的属性inline-block。而两个DIV之间，存在空格（换行）。所以就超过了100%。删掉换行，就在一行了！
设置display:inline-block后变成内联元素了，然后有“幽灵空白节点”，你将outer中加一行：font-size:0就可以了
inline-block:是使元素以块级元素的形式呈现在行内,你的宽度分配虽然刚好把100%分完，但是div之间有“幽灵空白点”,在outer中，添加font-size:0就可以了， 子div可以重新设置font-size:12px;
很简单，在一些浏览器中，div p ul 等一些元素会有默认的margin和padding值，所以在布局的时候，首先是要把这些样式格式化一下，百度参照reset.css
写样式前先初始化样式。
幽灵空白节点
你想要在一行,可以使用浮动float
我之前连布局的时候在张鑫旭的博客看到这篇文章，跟上面各位大佬的答案也是八九不离十。今天看到多一个答案设置font-size为0，受教了，明天我也试试。
http://www.zhangxinxu.com/wor...
这是html文档规范中，对文本元素和内联元素默认设置的一个字符间隔也就是幽灵空白点，清楚掉这个默认设置才是刚刚好的宽度等值
https://www.cnblogs.com/guagn...
https://segmentfault.com/q/10...