【CSS盒子模型box-sizing属性】解决文字与左间距留有几像素，但盒子总宽度不变

一、遇见问题

今天，遇到向一个盒子中写文字，但文字左右不居中，盒中文字需要与左间距留有几像素（px），直接用padding-left后，盒子的宽度会延长，但我想要的效果是盒子宽度不变。

二、解决办法

使用box-sizing属性解决。

1、box-sizing：border-box；
width和height从border算起，包括border和padding。
2、box-sizing：content-box；
width和height从content算起，包括border和padding。

示例

.filterTop {
    width: 100%;
    height: 3.5vh;
    line-height: 3.5vh;
    font-size: 14px;
    color: #999999;
    font-weight: 500;
    padding-left: 8px;
    box-sizing: border-box;
}