A common trick for vertical positioning elements is to use the following CSS:
margin-top:-8px; /* half of height */
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?