Padding, list and background

Question

Im really confused, it is strangest bug i have seen in my life.
Here is JSFiddle example: http://jsfiddle.net/c92mjkne/1/

As you can see, when our "comment" is hovered, #content get stange margins (but in CSS it have no margins). As i can know, it is ol's margins. But why they are outside of parent div?
Ok, that's strange. BUT! When we changing padding: 0; to padding: 1px; in #content's CSS, we see, that block have no margin! WTF? Help me please :D I really dont know how to google :D

Here is example:

#head, #foot, #content {
    padding: 7px;`
}

#content {
    padding: 0;
}

#comment:hover div {
    background: #eee;
}

#comment {
    border: 1px solid rgba(0, 0, 0, 0);
}

#comment:hover {
    border: 1px solid gray;
}
ul {
    margin: 7px;
}

<div id="comment">
    <div id="head">
        Efog <span style="color: gray">today, 10:10 pm</span>
    </div>
    <div id="content">
        <ul>
            <li>Hello</li>
            <li>Stack</li>
            <li>Overflow</li>
        </ul>
    </div>
    <div id="foot">
        <a href="?">answer</a>
    </div>
</div>

And here is code with padding: 1px:

#head, #foot, #content {
    padding: 7px;`
}

#content {
    padding: 1px;
}

#comment:hover div {
    background: #eee;
}

#comment {
    border: 1px solid rgba(0, 0, 0, 0);
}

#comment:hover {
    border: 1px solid gray;
}
ul {
    margin: 7px;
}

<div id="comment">
    <div id="head">
        Efog <span style="color: gray">today, 10:10 pm</span>
    </div>
    <div id="content">
        <ul>
            <li>Hello</li>
            <li>Stack</li>
            <li>Overflow</li>
        </ul>
    </div>
    <div id="foot">
        <a href="?">answer</a>
    </div>
</div>

Sorry for english, thanks.

Answer 1

As i can know, it is ol's margins. But why they are outside of parent div?

Because they are supposed to be (the are not “outside” the div, they have become margins of the div) – http://www.w3.org/TR/CSS21/box.html#collapsing-margins:

“In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, […]”

So no bug at all, but specs followed to the point.

BUT! When we changing padding: 0; to padding: 1px; in #content's CSS, we see, that block have no margin!

Read on at the above point,

“Two margins are adjoining if and only if:
[…]
 - no line boxes, no clearance, no padding and no border separate them
[…]”

Answer 2

http://jsfiddle.net/c92mjkne/2/

#comment:hover{
  background: gray;
}

It is normal, you set every div inside your comment div a background but you set some a margin. If you don't want any blank area, just set the background color to the div containing them all.

It's not a bug.