How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

user_609074 0
Viewed 218935

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:

enter image description here

However, there is no visual margin depicted when you hover over the element i.e. the margin is 'outside' the border and can be visualized. But negative margins don't show up. How do they look and what is it that makes it different?

Why is margin-top:-8px not the same as margin-bottom:8px?

So just how do negative margins work and what's the intuition behind them. How do they 'bump up' (in case of margin-top < 0) an item?

margin css
8 Answers

Just to phrase things differently from the great answers above, as that has helped me get an intuitive understanding of negative margins:

A negative margin on an element allows it to eat up the space of its parent container.

Adding a (positive) margin on the bottom doesn't allow the element to do that - it only pushes back whatever element is below.

user_36336960
Related