html取当前父组件div宽度,div嵌套2个子div，当子div的宽度等于父div宽度的时候，为什么会换行？...

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

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

HTML 代码如下：

sss

ddd

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明显要往下偏(感觉整个往下移动了一点)，请大牛指点！不甚感激！！