div嵌套2个子div，当子div的宽度等于父div宽度的时候，为什么会换行？

Question

最近在学css，老是碰到一些非常奇怪的问题，如下图:

蓝色背景部分为父div，宽度为200px，两个红色框为子div，小的宽48px，大的宽148px，加上它们的边框1px，大小框刚好200px，可是为什么在父容器里面会换行呢？我慢慢调整父容器宽度为 205px 时，子div才显示在一行内，但是两个div中间有明显空白，搞不懂为什么？？？

HTML 代码如下：

<div class="box">
    <div class="title">sss</div>
    <div class="content">ddd</div>
</div>

CSS代码如下：

*{
    border: 0;
    padding: 0;
    margin: 0;
}
.box{
    height: 48px;
    width: 200px;//这里改为205才不会换行，但是中间有明显的空白部分
}

.box > div{
    display: inline-block;
    border: 1px solid red;
    height: 46px;
}

.title{
    width: 48px;
}

.content{
    width: 148px;
}

问题2：还有一个问题就是，我在项目中也想使用这种方式布局，用来做表单的列头和内容区域，但是当我设置列头高的时候，两个div明显不在一行了，如下：

怎么感觉子div要跑出来的感觉，明明父div和子div高度一致（算上边框），子div明显要往下偏（感觉整个往下移动了一点），请大牛指点！不甚感激！！

Answer 1

问题一: 因为两个子div是行内块元素 inline-block, 这样的两个元素之间有空白字符会占据一定的空间，可以把两个元素之间的空白删掉，或者把父元素的字体大小设为0。具体可以看一下行内的盒模型。
问题二没看懂你想要干什么，可以描述的清晰一点。

Answer 2

1.用inline-block布局的话要让你的元素之间没有空格，比如：

<div class="box">
    <div class="title">sss</div><div class="content">
    ddd</div>
</div>

title和content之间不要有间隔，或者.box加个font-size:0，不然会导致空白字符会增加距离
2.设置基线对其方式试试，title和.content加个vertical-align: top;
其实这种还是用浮动布局好一点

Answer 3

子div 有边框 实际是比 父div宽的 而且可以用float:left来跟紧的

Answer 4

使用 display:inline-block; 能解决元素在一行的问题，但是会存在行内元素在一行显示的问题：

1. div 之间的空格问题，可由父盒子的 font-size:0; 解决
2. div 垂直方向上的对齐问题，可由 vertical-align: base; 解决

学习CSS建议看张鑫旭的网站，铺得广讲的有深度，实践性也强，强力推荐

Answer 5

因为你把div设置成行内元素后之间会有空白符占位置。可以改成：

<div>
    <div>....</div><div>....</div>
</div>

或者设置font-size为0