Html 为什么<；a>；包含div边界的标记内容溢出？

我想在一个div中实现一个无序列表的水平菜单。问题是标签溢出（更大）而包含div。或者，从另一面看，div确实考虑了标签的完整大小

Css

Html

不要过量服用

问题与填充有关，因为如果将填充设置为0，则不会出现溢出。

---

为什么会发生这种情况，最好的做法是什么？

将下面的代码行添加到CSS代码的LI块中

display: inline-block;

div.menu{
背景：灰色；
}
div.menu>ul{
列表样式类型：无；
保证金：0；
填充：0；
}
div.menu>ul>li{
显示：内联；
}
div.menu>ul>li>a:链接，div.menu>ul>li>a:已访问{
颜色：#FFFFFF；
背景颜色：橙色；
填充：4px；
文本对齐：居中；
文字装饰：无；
显示：内联块；/*此行解决了重叠问题*/
}

不要过量服用

内联元素上的填充不会影响元素的大小。填充将仅在元素周围可见

您可以使用

显示：内联块，然后
显示：块在链接上，这将包括元素大小中的填充

另一种方法是使用
float:left和
显示：块在链接上。这取决于您希望布局的方式，因为这将使链接彼此相邻，而不是用空格分隔

div.menu > ul > li > a{
  display:inline-block;
}

应该修复溢出
 @SleekGeek:更高。它在包含div的上面和下面扩展。如果运行JSFIDLE示例，它是可见的；到a标签css@It似乎不公平的是，我只能接受一个答案，因为每个答案都给了我另一个见解，而那些回答的人几乎是在同一时间做的。这是最接近的解释。所以若我理解的话：在内联元素上，填充不会添加到计算站点，但它是可见的。模糊地类似于边距，可以重叠。@user3104537:是的，它类似于边距，只是填充也不影响周围的元素。您可以在本页底部的黄色元素上看到一个示例：
display: inline-block;

div.menu > ul > li > a{
  display:inline-block;
}