giving child div a margin relative to the parent div

Question

This is my html:

<div class='parentDiv'>
    <div class='childDiv'></div>
</div>

and this is my CSS:

.parentDiv {
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.childDiv {
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

the fiddle: http://jsfiddle.net/1whywvpa/

How come childDiv does not get the margin-top of 22px? It only gets a margin top if the pixels is greater then the 200px which is already given to the parentDiv. Any way to make the childDiv get a parent div of 22px relative to the parentDiv without doing some type of 'give the parent div a 1px padding' hack?

`position: absolute;` to `.childDiv` will work but I'm not sure you'll use it. — Anonymous, Sep 21 '14 at 21:27
Set `display: inline-block;` to `.childDiv` or `.parentDiv` - http://jsfiddle.net/1whywvpa/2/ — Anonymous, Sep 21 '14 at 21:29
Hello , it's normal in CSS documentary if MARGIN across other margin the big margin count the other margin ignore , you should separate your margins with Border or Padding . for example you can add to your css : .parentDiv { padding : 1px ; } or add border .parentDiv { border : 1px solid red ; } — Soufiane, Sep 21 '14 at 21:41
@MaryMelody thanks, I think I like your solution the most as I do not want to position div's absolutely nor do I want to make the childDiv float left. Put it down as the answer and I will mark it. — SilentDev, Sep 21 '14 at 21:43

algorhythm · Answer 1 · 2018-11-22T08:01:26.697

4

Maybe this could help: CSS Margins Overlap Problem

Add position property to both elements. Parent is relative and child is absolute...

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.childDiv {
    position: absolute;
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

Here's your fiddle: http://jsfiddle.net/algorhythm/1whywvpa/5/

edited Nov 22 '18 at 08:01

answered Sep 21 '14 at 21:32

algorhythm

8,530
3
35
47

I wanted to do it without setting childDiv to position: absolute or making it float. I found 'display: inline-block' to be the best solution in my case. – SilentDev Sep 21 '14 at 21:47

score 1 · Answer 2 · answered Sep 21 '14 at 21:28

1

It looks like the .childDiv isn't floated left.

If you float: left; the .childDiv, as I have in JS Fiddle, it will apply the margin as required.

answered Sep 21 '14 at 21:28

Andi North

907
5
12

any way to do it if I don't want childDiv to float left? – SilentDev Sep 21 '14 at 21:39
1

Set `display: inline-block;` to `.childDiv` or `.parentDiv` - http://jsfiddle.net/1whywvpa/2/ or http://jsfiddle.net/1whywvpa/6/ – Anonymous Sep 21 '14 at 21:39
1

@MaryMelody Or giving the parent a `overflow: hidden` or `padding-top: 1px;` or `border-top: 1px solid transparent;`. This is caused by [Collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing). – Hashem Qolami Sep 21 '14 at 21:43
@HashemQolami Yeah! Thanks! and _I remember that you told me about collapsing margins before. :)_ – Anonymous Sep 21 '14 at 21:45

score 1 · Answer 3 · edited Oct 10 '17 at 10:02

1

You don't want to use margin in this case. You should add padding to the parent div. You also need to close your parent div. So remove the margin-top:22px on the child div. Add padding-top:22px; on the parent div.

edited Oct 10 '17 at 10:02

TZHX

5,291
15
47
56

answered Sep 21 '14 at 21:29

dsketch21

46
1
4

score 0 · Answer 4 · answered Sep 21 '14 at 21:33

Make the child div a percentage of the containing parent div:

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
    }

.childDiv {
    position: absolute;
    background-color: green;
    width: 7%;
    height: 6%;
    margin-top: 1%;
    }

giving child div a margin relative to the parent div

4 Answers4