非你网

在传统 div 排版中。padding竟会占用父容器的宽高，这个很影响心情和需要。

比如下边这个布局：

.group{
   margin:20px;
}

.item{
    display:inline-block;
    width:250px;
    height:40px;
    line-height:40px;
    background-color:#FE7D91;
    color:#fff;
    border-radius:3px;
 }

.item label{
    float:left;
    width:35%;
    text-align:right;
    font-size:16px;
  }

.item label ~div{
    float:left;
    width:65%;
    font-size: 14px;
  }

<div class="group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

使用 box-sizing，容器宽度都不会被撑开。

还有一种方法，就是使用 flex 布局。

完整的demo：https://jsfiddle.net/vini123/kbecxju7/1/

参考

http://www.w3cplus.com/content/css3-box-sizing