CSS: Margin-top gdy rodzic nie ma obramowania

Jak widać na to zdjęcie, mam pomarańczowy div wewnątrz zielony div bez górnej granicy. Pomarańczowy div ma górny margines 30px, ale również spycha zielony div w dół. Oczywiście dodanie górnej granicy rozwiąże problem, ale potrzebuję zielonej div, aby była górna granica. Co mogłem zrobić?

.body {
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	width: 120px;
	height: 112px;
	background-color: lightgreen;
}

.body .container {
	background-color: orange;
	height: 50px;
	width: 50%;
	margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
	<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

Thanks

Author: LiuYan 刘研, 2009-09-08
Source

7 answers

Możesz dodać overflow:auto do .body, aby zapobiec zapadaniu się marginesów. Zobacz http://www.w3.org/TR/CSS2/box.html#collapsing-margins

 92
Author: Fabian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-08 15:57:11

To, czego doświadczasz, to upadek marginesu. Margines nie określa obszaru wokół elementu, ale raczej minimalną odległość między elementami.

Ponieważ zielony kontener nie ma obramowania ani wypełnienia, nie ma nic, co mogłoby zawierać margines pomarańczowego elementu. Margines jest używany między górnym elementem a pomarańczowym elementem tak, jakby zielony Pojemnik miał margines.

Użyj wypełnienia w zielonym pojemniku zamiast marginesu na pomarańczowym element.

 9
Author: Guffa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-10 01:05:08

Użyj padding zamiast margin: 

.body .container {
    ...
    padding-top: 30px;
}
 1
Author: Tomas Aschan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-08 15:45:55

Nie wiem, czy to zadziała w Twoim przypadku, ale właśnie rozwiązałem to za pomocą następujących właściwości CSS 

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element został zepchnięty w dół, ponieważ jego pierwszy element potomny miał margin-top: 30px. Z tym CSS, teraz działa zgodnie z oczekiwaniami :) Nie wiem, czy zadziała w każdym przypadku, YMMV.

 1
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-10 01:06:26

Możesz dodać padding-top: 30 na zielonym polu, użyć względnego pozycjonowania na pomarańczowym polu za pomocą top: 30px, lub float pomarańczowego pola i użyć tego samego margin-top: 30px.

 0
Author: Jonathan Patt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-08 15:50:03

Czytasz ten dokument: Model pudełkowy-załamanie marginesu

CSS 

.body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}
 0
Author: ranonE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-08 16:08:48

Nie wiem, jak to brzmi, ale co powiesz na dodanie przezroczystego obramowania?

 0
Author: finferflu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-20 01:07:53