Question

I know there’s another question like this but I tried it and the answer didn’t work.

I have a p with a div and I want to be able to use a reverse (negative) margin on the p. At the moment it’s not effecting the p but the containing div.

Here’s the code :

.reset {
    margin-left:4px;
    margin-top: 4px;
    height:50px;
    width:50px;
    background:#FFF;
}
.reset p {
    margin-top:-4px;
    font-size: 38px;
    font-family: sans-serif;
    text-align: center;
}

Thanks in advance

Answer 1

It doesn’t work because your p is the first element of your div. As a result, the margin-top of both your p and div are somewhat merged.

For example, if you put margin-top: 20px on both your p and your div, it will only result in a 20px top margin, not 40px.

The easiest way is to use position: relative;:

p { position: relative; top: -4px; }

This way, the p is still in the usual flow, but you move it 4px up.