How do negative margins in CSS work and why is margin-top -5 margin-bottom 5

Question

A common trick for vertical positioning elements is to use the following CSS:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

When seen in the metric view as in Chrome this is what you see:

However, there is no visible margin when you hover over the element; rather, the margin is seen "outside" of the border. However, negative margins are not visible. What distinguishes them from one another in terms of appearance?

Why are margin-top:-8px and margin-bottom:8px different?

So, how exactly do negative margins operate and what is the underlying theory? How do they "bump up" an item when the top margin is less than 0?