Why does an overflow parent when padding is set

Question

I have a simple HTML vertical menu, with such a structure:

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

I've set the .item div to be rendered as text elements, so they're ordered next to each other:

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

This kinda works:

However, I want to apply a :hover effect on each link, such as vertical black borders will come from sides and connect with the bottom dashed border:

So I did the following:

#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;
}

But the link seems to be bigger than it's parent element. I didn't think this was possible:

What's wrong? Why doesn't the parent DIV stretch to be able to contain whatever's inside?

(not) Working fiddle. Rest of the CSS:

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

Answer 1

Add the following css:

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

Before this code, the a tags are not being displayed as blocks and the container doesn't want to be friends with them.

Answer 2

The padding 5px you used on the a tag will be partially applied but only left-right in respect to other sibling inline elements.

You're trying to set padding to inline elements, which is visually not the desired. The padding on inline elements will refer to the textual line, but not in respect to the containing block-level parent. Remember that padding can be set to block-level elements such as <div>, <h1>, <p> etc...

One fix is to use some simple math and set line-height to your a
The other is to set your inline anchors as display-block elements,
doing that way your elements will act contextually as inline elements while being allowed to take block-level elements properties.

https://developer.mozilla.org/en-US/docs/Web/CSS/display
http://www.w3.org/TR/CSS2/propidx.html

Also setting just like that an inline any element to be inline-block is not the best choice and is not fully compatible with older browsers.
display-inline for span, a, b, i, s, q, u will work in all browsers,
but generally speaking span is the perfect one to be used in that case cause even if an inline element by properties is similar to div.

https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/HTML/Inline_elements

Answer 3

From CSS 2.1 section 10.6.1 Inline, non-replaced elements

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

The height of the block div is the height of the stack of line boxes, which in this case is the height of the one and only line box. Which means that if you want to contain the <a> with padding, you need to set the line-height of the <a> element.

Add to your CSS

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

Like this: http://jsfiddle.net/Z63gs/4/

Answer 4

You can try putting overflow:hidden; on your #menu item. http://jsfiddle.net/Z63gs/1/

This will just hide the extra fluff. I think your padding is making the <a> elements larger than you would like.

Elliot's answer is much cleaner than this.