一个div中有两个inline-block元素，width都是50%，为什么第二个会被挤下去？

Question

问题如下所示：

div中嵌套的section样式：

  .padding-right {
    display: inline-block;
    padding-right : 20px;
    width: 50%;
    box-sizing: border-box;
    vertical-align: middle;
  }
  .padding-left {
    display: inline-block;
    padding-left: 20px;
    width: 50%;
    box-sizing: border-box;
    vertical-align: middle;
  }

这样写如上图所示，safe即第二块section就会被挤下去，width改小写比如49.5%就可以了，但是整体宽度就会变成99%，最右边会出现与上下块不对齐的现象。

有没有办法让两个scetion回到同一行上并且不会出现width变短导致的不对齐的问题？

Answer 1

应该是inline-block的元素间距问题吧，建议参考张鑫旭 - 去除inline-block元素间间距的N种方法。

Answer 2

2 个元素之间有一个空白字符，空白字符也占用宽度的，可以把 div 的字体大小设置为 0 然这个空白字符不占据宽度。

Answer 3

padding-right : 20px;
padding-left: 20px;

width、border、margin、padding，四項相加之和才是所佔寬度。

Answer 4

补充楼上的，
在有些浏览器下，inline-block，会多出几个像素的间距

Answer 5

行内元素默认样式

Answer 6

父级元素的字体大小（对应题主这里div元素），font-size设置成0，子元素（对应这里的selection元素）中设置具体的字体大小。原因，由于两个子元素也就是这里的selection元素中间有空白文本节点，并且继承父元素div的font-size(浏览器有默认的font-size，设置成0即可)。