盒子大小边框不工作，高度仍然包括填充

Question

我有一个问题，我使用了带有所有必要浏览器前缀的盒子大小边框，它们已经工作了一百万次。但是在这个例子中它根本不起作用 http://eg-dev.myshopify.com/ 检查左上方的社交图标。特别是这个块：

<div class="social-media">
    ...
</div>

这是CSS：

#toolbar .social-media {
  padding: 5px 0;
  height: 17px;
}

和通配符元素框大小：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

然而div.social-media显示为7px高度+ 5px + 5px填充。有任何想法吗？我检查了HTML标记，这是无错误的。

谢谢

Answer 1

这正是边框工作的方式。填充和边框不会影响DIV的宽度或高度。所有边框和填充都应用于框内而不是外部