CSS ein div vertikal nach unten

Im bewegen versucht, ein div in einem anderen div ein wenig nach unten zu bewegen, aber wenn ichCSS ein div vertikal nach unten

margin-top: 10px;

verwenden macht es eine weiße Lücke an der Spitze. Heres die html:

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

    </div> 
</div>

Und heres die 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; 
}

Und heres ein Screenshot der Webseite:

Quelle

2016-10-15 Lachlan Mather

Es sieht so aus, als ob Sie in der #Auswahl einen oberen Rand von 40px haben. Wo liegt Ihre Marge bei 10px? – Joel

vielleicht können Sie das übergeordnete Element ändern, indem Sie padding-top:10px; hinzufügen, anstatt das untergeordnete Element zu ändern.

Quelle

2016-10-15 22:12:36 n1kkou

margin-top style in #selection entfernen und anwenden padding- top to #top

Quelle

2016-10-15 22:09:56 Olga

Tut nichts. Buchstäblich. sieht so aus: http://imgur.com/a/eOfPh –

falsche ID, sorry – Olga

Oh Gott, es funktioniert. Danke lieber –

Dies ist ein "collapsed margin" -Problem. Why would margin not be contained by parent element?

Sie müssten die Eltern div ändern entweder (1) in einen Rahmen, (2) Position absolut, (3) Anzeige als inline-block, (4): Es hat sich in dieser Frage beantwortet Überlauf automatisch.

Weitere Informationen finden Sie unter dem angegebenen Link.

Quelle

2016-10-15 22:12:05 Simon

Dazu können Sie position: absolute verwenden. Hier ist der 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*/ 
 
}

Hoffe, es hilft! Ich denke Padding würde immer noch einen Hintergrund hinterlassen, also ist dies eine bessere Idee.

Quelle

2016-10-15 22:18:58

Hier ist die Arbeit fiddle Ich hoffe, es kann helfen.

Quelle

2016-10-15 22:23:02

Dies liegt daran, wenn Sie ein Blockelement (Anzeige: Block) in einem anderen Blockelement haben, werden die Ränder zusammenbrechen. Es wird nur als die größte Marge betrachtet.

Also, in Ihrem Beispiel wird nur einer der Ränder (40px) berücksichtigt. See reference about collapsing margins.

Es gibt einige Problemumgehungen. Wählen Sie eine:

mit padding statt margin für die Komponente im Inneren.
Ändern display Typ. z.B. display: inline-block.
Verwenden Sie absolute Positionierung.

Quelle

2016-10-15 22:37:50

CSS ein div vertikal nach unten

Antwort

Verwandte Themen