很简单的问题，两个div为什么没有在一排。我感觉是我理解有误，border-box是包括了padding、border以后的
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo{
width: 100%;
box-sizing: border-box;
}
.demo div{
width: 50%;
border: 1px solid red;
height: 90px;
}
</style>
</head>
<body>
<div class="demo">
<div></div>
<div></div>
</div>
</body>
</html>你需要理解的是行内元素可块级元素的区别，div默认是行内元素，行内元素默认会固定占用一行
给内部div一个display:inline-block ，然后给.demo一个font-size:0 ，就一行了
不推荐在html里让两个div并排来消除空白符，结构与样式分离，不要单纯为了调整样式去修改现有的的html结构
答案也很简单：
1、div是块状元素，不会在一行的，
2、父元素设置了box-sizing: border-box;自元素不会继承
3、设置了box-sizing: border-box;后，padding、border就会占用内容区，而不会增加宽度
只需将代码稍作修改即可
.demo{
width: 100%;
box-sizing: border-box;
font-size: 0;
}
.demo div{
width: 50%;
border: 1px solid red;
height: 90px;
box-sizing: border-box;
display: inline-block;
}另外怎样消除inline-block元素间间隙的方法请参阅此文https://segmentfault.com/a/1190000010989233
jsfiddle demo
5 回答1.2k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
4 回答1.9k 阅读
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
2 回答1.8k 阅读✓ 已解决
你的.demo>div 仍然是block元素 就算你把宽度设置成了50% 剩下的50% 会默认变成margin
想要一行排列
.demo div{
并且要消除html中的文本节点（删除换行）
<div class="demo">
</div>
另外你的理解没问题 border-box是包含border，padding，content区域的盒子模型