CSS moving a div vertically down

Question

Im trying to move a div inside another div down a bit, but when I use

margin-top: 10px;

It makes a white gap at the top. Heres the html:

<div id="topb">
    <div id="selection">

    </div>
</div>

And heres the CSS:

#topb {
    background: url(images/tomato-background.jpg) no-repeat fixed;
    background-size: cover;
    height: 100%;
    width: 101%;
    margin-left: -10px;
}

#selection {
    background-color: #4d4d4d;
    width: 60%;
    height: 500px;
    margin: auto;
    margin-top: 40px;
}

And heres a screenshot of the website:

It looks like you have a margin top of 40px in the #selection. Where is your margin top of 10px? — Joel, Oct 15 '16 at 22:11

score 2 · Answer 1 · answered Oct 15 '16 at 22:18

For this, you can use position: absolute. Here is the code:

#topb {
    background: url(images/tomato-background.jpg) no-repeat fixed;
    background-size: cover;
    height: 100%;
    width: 101%;
    margin-left: -10px;
}

#selection {
    background-color: #4d4d4d;
    width: 60%;
    height: 500px;
    margin: auto;
    position: absolute;
    top: 40px;  /*This is where it is changed as well as the line above*/
}

Hope it helps! I think padding would still leave a background, so this is a better idea.

score 1 · Accepted Answer · answered Oct 15 '16 at 22:12

1

maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.

answered Oct 15 '16 at 22:12

n1kkou

3,096
2
21
32

Olha Vadiasova · Answer 3 · 2016-10-15T23:02:58.697

0

Remove margin-top style in #selection, and apply padding-top to #topb

edited Oct 15 '16 at 23:02

answered Oct 15 '16 at 22:09

Olha Vadiasova

418
6
16

Doesnt do anything. Literally. looks like this: http://imgur.com/a/eOfPh – Lachlan Mather Oct 15 '16 at 22:11
Indeed. Wrong :) I've edited it. Anyway, you've got your problem solved and that is great! – Olha Vadiasova Oct 15 '16 at 23:05

score 0 · Answer 4 · edited May 23 '17 at 10:27

0

This is a "collapsed margin" problem. It has been answered in this question : Why would margin not be contained by parent element?

You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.

Refer to the posted link for more detail.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 15 '16 at 22:12

Simon

2,353
1
13
28

score 0 · Answer 5 · answered Oct 15 '16 at 22:23

0

Here is the working fiddle Hope it may help.

position:absolute;
position:relative;

answered Oct 15 '16 at 22:23

Pritish Vaidya

21,561
3
58
76

score 0 · Answer 6 · answered Oct 15 '16 at 22:37

This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.

So, in your example it will only consider one of the margins (40px). See reference about collapsing margins.

There are a few workarounds. Choose any:

using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.

CSS moving a div vertically down

6 Answers6