Why won't my negative margins go above a certain area?

Question

Here is the jsfiddle for reference: http://jsfiddle.net/4devvjyv/1/

I'm trying to get the "Section" box to go above the gray line so that it looks like the "Section" box is centered around the line. But negative margins are not pushing the box above the line.

.divider {
    margin-top: 6px;
    border-top: 2px solid gray;
    font-size: 10px;
    position: relative;
}

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin-top: -200px;
}

The divider is the line, and the divider-text is the "Section" box. I put a margin-top of 6px for the divider just so I wouldn't mess up the spacing between the two content because I would like the "Section" box to be 6px above the line and 8px below the line.

Does anyone know why it's not working? I tried playing around with a negative left margin and the "Section" box behaved as it should.

http://stackoverflow.com/questions/7611030/css-display-inline-block-does-not-accept-margin-top tackles pretty much the same question, with pretty much the same answer as @rob waminal's — ultranaut, May 08 '15 at 01:05
@ultranut Agreed. But I'm still not satisfied with the explanation. (In my opinion, an alternate method does not an answer make.) — showdev, May 08 '15 at 01:15
as I've explained it on my answer below, negative margins wont work unless you free it from it's parent element. — rob waminal, May 08 '15 at 02:05

rob waminal · Accepted Answer · 2015-05-08T02:01:11.830

3

Updated your jsfiddle

Use top: -20px instead of margin-top:-200px. I've use -20px because -200px will float way high and cannot be seen.

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    top: -20px;
}

another solution would be

.divider-text {
    position: absolute;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin: -20px; // making it center.
}

releasing the element from it's parent element (position: absolute) will make the element float, does following the negative margin.

The element is still under its parent element so any floating styles will not go beyond its parent element unless you free it by, float, position:absolute, or display:block. But display block does not actually release the element from its parent but moves it to the next. -- need anyone's input on this though.

edited May 08 '15 at 02:01

answered May 08 '15 at 00:46

rob waminal

18,117
17
50
64

I'm not sure if this is the correct answer, but margins clears the area of an element `outside` the border while padding clears an area of an element `inside` the border. So negative value doesn't really clears an area. – rob waminal May 08 '15 at 00:54
2

But [it works](http://jsfiddle.net/4devvjyv/2/) if the element is `display:block`. I'm sure there's an explanation... – showdev May 08 '15 at 00:57
1

hmm, when you do a `display:block` the element is brought down to the next line in which it is no longer treated as the child of the `div` but when you put it on a `display:inline-block` the element is still child relative to the `div` element. So when putting a margin inside a child element with a relative position, it will always follow with respect to its parent, changing the position to absolute will make the negative margin work. – rob waminal May 08 '15 at 01:05
Forgive me if I misunderstand. I'm not sure what you mean by "free it from it's parent element". A `block` element is still a child of its parent. Could you help clarify? – showdev May 08 '15 at 16:04

Why won't my negative margins go above a certain area?

1 Answers1