Inner div resizing outer div with margins

Question

I've got a div whose height is determined by an encolsed div. The issue with that is, when i add some extra margin on the top the encolsing div resizes properly. When i add the margin on the bottom it seems like only the enclosed div box model is affected and the enclosing div is not.

HTML

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE
</div>

<div class="dynamicDiv">
    <span> title</span>
    <div class="card">
        Content here
     </div>
</div>

<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE VOL 2
</div>

CSS

.dynamicDiv{
  background-color:yellow;
}

.card{
height:15vh; //an example of the height for this card. could be anything.
margin-top:10px;
margin-bottom:10px;
}

It appears that this has something to do with the <span> title</span> element as if i add one on the bottom thigns work as i would expect them to ( unless the span is empty in which case things render as if the span isnt there ).

I dont very well understand why this happens so if its something obvious that has to do with the box model please let me know. Thanks a lot.

Fiddle here :

https://jsfiddle.net/d88yr4yw/

P.S: What im trying to achieve is have a div that is always as high as the enclosed div height + a margin top and bottom + whatever other elements might be in there. I'd rather i didnt have to hardcode any heights if not impossible to work around this otherwise though.

What if you add 10px padding to the dynamic div rather than using margin for the card div? — Michael Beeson, Oct 15 '17 at 16:28
thats a good workaround but im mainly more interested in finding out what exactly is happening on my fiddle and why, mainly for better understanding reasons. — Return-1, Oct 15 '17 at 17:46

Michael Beeson · Accepted Answer · 2017-10-15T18:03:06.963

5

A quick workaround is to use, on the outer div:

overflow:auto,

or

padding-top:1px; margin-top:-1px;

The way margin works on inner divs is counter intuitive. It's discussed by much cleverer people than myself here:

Margin on child element moves parent element

If you read the comments on that link, you'll see that a lot of people aren't particularly happy about this bizarre "rule" either!

I made the changes to the fiddle (Removed the span at the top, and the margin still holds) using the overflow:auto technique:

https://jsfiddle.net/ps9na82r/

edited Oct 15 '17 at 18:03

answered Oct 15 '17 at 17:58

Michael Beeson

2,840
2
17
25

Thanks a lot, this is exactly what i was looking for. It messed with my brain hard. – Return-1 Oct 15 '17 at 18:01

score 0 · Answer 2 · answered Oct 15 '17 at 16:31

0

You better use padding-top and badding-bottom instead of margins. It will more softly expand your parent block without addin margins outside parent block

padding-top: 10px;
padding-bottom: 10px;

answered Oct 15 '17 at 16:31

Anton Gladchenko

46
3

thats a good way of solving the problem but it doesnt explain why having a span makes the margin behave differently than it does when a span isnt there which is the main reason im posting this as it's a little confusing to me that this happens. – Return-1 Oct 15 '17 at 17:48

Epoch · Answer 3 · 2017-10-15T18:04:19.517

If you want to avoid hard-coding the height, you can simply add a height modifier of fit-content (or 100%). This will ensure anything inside that wrapper stretches the wrapper with it.

.dynamicDiv{
  background-color:yellow;
  height: fit-content;
}

Span shouldn't affect your margins, as it's an inline element. However, if you use paragraphs, they'll have a default margin based on your browser unless you remove it.

Check out this fiddle: https://jsfiddle.net/d88yr4yw/4/

I commented out margin-top so you can see how you'll still have a margin without declaring it because paragraph creates one automatically. If you're using a browser with developer tools, you can hit F12 and then Ctrl + Shift + C, then mouse over the elements to see exactly what is happening.

Additionally, if you want to keep the paragraph's default margin while still stretching your wrapper, you can use overflow to keep your content from spilling out of the internal div.

overflow: auto;

Uncomment each to see the effects they have.

Edit: To clarify on OP's question below, the result of the disappearing margin is due to the original wrapper having zero content without the span. By adding an overflow command, this causes the margin to stack rather than automatically collapse.

See more on Box Model - Collapsing Margins.

The thing is, its the inner div that decides the height of the parent. Im mainly trying to figure out why having a span allows for the margin to resize the parent div but when not having one the margin spills over as you say. I never read anywhere anything about margin being affected like that so im trying to understand why this thing in my fiddle is happening. — Return-1, Oct 15 '17 at 17:47
It looks like this has something to do with [Collapsing Margins](https://www.w3.org/TR/CSS2/box.html#collapsing-margins); since the content of your wrapper is empty, there's nothing for it to set a margin against. @GeorgeAvgoustis — Epoch, Oct 15 '17 at 18:01

Inner div resizing outer div with margins

3 Answers3