为什么<a> overflow parent <div> when padding is set</div></a>

Question

我有一个简单的HTML垂直菜单，有这样的结构：

<div id="menu">
   <div class="item">
      <a href="...">...</a>
   </div>
</div>

我已将.item div设置为文本元素，因此它们彼此相邻排序：

#menu div.item {
  margin: 0px;
  padding: 0px;
  display: inline;
}

这种方式有效：

但是，我想对每个链接应用:hover效果，例如垂直黑色边框将来自两侧并与底部虚线边框连接：

所以我做了以下事情：

#menu div.item a{

  padding: 5px;
  border-width: 0px 1px 0px 1px;
  border-color: transparent;
  border-style: dashed;
}
#menu div.item a:hover{
  border-color: black;
  background: #B3D2FF;
}

但链接似乎比它的父元素更大。我认为这不可能：

怎么了？为什么父DIV伸展不能包含内部的任何内容？

(not) Working fiddle. 其余的CSS：

#menu {
  text-align: center;
  margin: 0px;
  padding:0px;
  background-color: #CEE2FF;
  border-bottom: 1px dashed #1868FF;
}

Answer 1

添加以下css：

#menu div.item a {
    display: inline-block;
}

在此代码之前，a标记未显示为块，容器不希望与它们成为朋友。

Answer 2

您在5px标记上使用的填充a将部分应用，但仅针对其他同级left-right元素应用inline。

您正尝试将padding设置为inline个元素，这些元素在视觉上not the desired。 内嵌元素中的填充将引用文本行，但不会引用包含block -level parent的内容。 请注意，padding可以设置为block级元素，例如  <div>，<h1>，<p>等......

One fix将a用于inline simple math and set line-height将您的display-block锚点设置为 inline 元素，
通过这种方式，您的元素将在上下文中作为block元素执行，同时允许其使用inline - 级元素属性。

The other
https://developer.mozilla.org/en-US/docs/Web/CSS/display

同样设置就像那样 inline-block 任何元素为display-inline 不是最佳选择，与旧浏览器不完全兼容。
span, a, b, i, s, q, u span适用于所有浏览器，
但一般来说div是在这种情况下使用的最佳选择，即使属性的内联元素与{{1}}类似。

http://www.w3.org/TR/CSS2/propidx.html
https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Answer 3

来自CSS 2.1部分10.6.1 Inline, non-replaced elements

  

内联未更换框的垂直填充，边框和边距   从内容区域的顶部和底部开始，无关   与'线高'。但是，只有'线高'才被使用   计算线框的高度。

块div的高度是线框堆叠的高度，在这种情况下，它是唯一的线框的高度。这意味着如果要包含带填充的<a>，则需要设置<a>元素的行高。

添加到您的CSS

#menu div.item a{
  line-height:30px;
  vertical-align:top;
}

像这样：http://jsfiddle.net/Z63gs/4/

Answer 4

您可以尝试将overflow:hidden;放在#menu项上。 http://jsfiddle.net/Z63gs/1/

这只会隐藏额外的绒毛。我认为你的填充使<a>元素比你想要的要大。

艾略特的回答比这更清晰。