Margines na elemencie potomnym przesuwa element nadrzędny

Mam div (rodzic ), który zawiera inny div (dziecko). Rodzic jest pierwszym elementem body bez określonego stylu CSS. Kiedy ustawiam 

.child
{
    margin-top: 10px;
}
/ Align = "center" bgcolor = "# e0ffe0 " / papież / / align = center / Zamiast przesuwać dziecko o 10px w dół, mój rodzic przesuwa się o 10px w dół.

Moje DOCTYPE jest ustawione na XHTML Transitional.

Co mi umyka?

edit 1
Mój rodzic musi mieć ściśle określone wymiary, ponieważ ma tło, które musi być wyświetlane pod nim od góry do dołu(piksel idealny). Ustawianie pionowych marginesów to no go .

edit 2
To zachowanie jest takie samo na FF, IE jak i CR.

Author: Robert Koritnik, 2009-11-19
Source

14 answers

Znaleziono alternatywę w elementach potomnych z marginesami w DIVs Możesz również dodać:

.parent { overflow: auto; }

Lub: 

.parent { overflow: hidden; }

Zapobiega to zapadaniu się marginesów . Obramowanie i wyściółka robią to samo. W związku z tym można również użyć następujących opcji, aby zapobiec zwinięciu górnego marginesu: 

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Aktualizacja według popularnego żądania: Cały punkt zwijania marginesów to Obsługa treści tekstowych. Na przykład: 

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
</div>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

Ponieważ przeglądarka się zapada marginesy, tekst będzie wyświetlany zgodnie z oczekiwaniami, a znaczniki opakowania <div> nie mają wpływu na marginesy. Każdy element zapewnia, że ma odstępy wokół siebie, ale odstępy nie zostaną podwojone. Marginesy <h2> i <p> nie sumują się, ale wsuwają się w siebie (zapadają się). To samo dzieje się dla elementu <p> i <ul>.

Niestety, dzięki nowoczesnym projektom ten pomysł może cię ugryźć, gdy wyraźnie chcesz kontenera. Jest to tzw. nowy kontekst formatowania bloku W CSS speak. overflow lub sztuczka marginesu ci to da.

 394
Author: vdboor,
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
2017-05-23 12:10:43

Jest to normalne zachowanie (przynajmniej wśród implementacji przeglądarki). Margines nie wpływa na pozycję dziecka w stosunku do rodzica, chyba że rodzic ma padding, w którym to przypadku większość przeglądarek dodaje margines dziecka do padding rodzica.

Aby uzyskać pożądane zachowanie, potrzebujesz: 

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
 44
Author: Ben James,
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-11-19 11:10:31

Chociaż wszystkie odpowiedzi rozwiązują problem, ale zawierają kompromisy/poprawki / kompromisy, takie jak {10]}

  • floats, You have to float elements
  • border-top, to popycha rodzica o co najmniej 1px w dół, który następnie powinien być skorygowany poprzez wprowadzenie marginesu -1px do samego elementu rodzica. Może to powodować problemy, gdy rodzic ma już margin-top w jednostkach względnych.
  • padding-top, taki sam efekt jak przy użyciu border-top
  • overflow: hidden, nie może być stosowany, gdy rodzic powinien wyświetlać przepełnioną zawartość, jak rozwijane menu
  • overflow: auto, wprowadza scrollbars dla elementu nadrzędnego, który ma (celowo) przepełnioną zawartość (jak cienie lub trójkąt końcówki narzędzia)

Problem można rozwiązać używając pseudo elementów CSS3 w następujący sposób 

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

Https://jsfiddle.net/hLgbyax5/1/

 14
Author: Ejaz,
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
2015-06-15 14:22:06

Dodaj styl display:inline-block do elementu potomnego

 11
Author: Атанас Димитров,
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
2015-04-08 11:09:47

Element nadrzędny nie musi być pusty przynajmniej umieścić &nbsp; przed elementem podrzędnym.

 6
Author: George SEDRA,
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
2013-07-23 09:00:13

This is what worked for me 

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

Http://jsfiddle.net/97fzwuxh/

 6
Author: erdomester,
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
2014-09-26 18:34:32

Dowiaduję się, że, w Twoim wnętrzu .css > jeśli ustawisz właściwość display elementu div na inline-block to rozwiąże problem. i marża będzie działać zgodnie z oczekiwaniami.

 2
Author: vincent thorpe,
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
2016-05-13 22:29:47

margin elementów zawartych w .child zapadają się.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

W tym przykładzie p otrzymuje margin z domyślnych stylów przeglądarki. Domyślną wartością przeglądarki font-size jest zazwyczaj 16px. Mając margin-top więcej niż 16px na #child zaczynasz zauważać ruch pozycji.

 1
Author: 25thhour,
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-11-19 11:45:40

Też miałem ten problem, ale wolałem zapobiegać hackom ujemnych marż, więc wstawiłem

<div class="supercontainer"></div>

Wokół niego wszystko, co ma paddings zamiast marginesów. Oczywiście oznacza to więcej divitis, ale jest to prawdopodobnie najczystszy sposób, aby zrobić to prawidłowo.

 1
Author: Zyl,
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
2013-04-07 15:03:51

Co ciekawe, Moje ulubione rozwiązanie tego problemu nie jest jeszcze wymienione tutaj: korzystanie z pływaków.

Html: 

<div class="parent">
    <div class="child"></div>
</div>

Css: 

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

Zobacz tutaj: http://codepen.io/anon/pen/Iphol

Zauważ, że w przypadku, gdy potrzebujesz dynamicznej wysokości na rodzicu, musi ona również unosić się, więc po prostu zastąp height:100px; przez float:left;

 1
Author: schellmax,
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
2014-07-14 20:13:54

Alternatywnym rozwiązaniem, które znalazłem zanim wiedziałem, że poprawną odpowiedzią było dodanie przezroczystej granicy do elementu nadrzędnego.

Twoje pudełko będzie używać dodatkowych pikseli... 

.parent {
    border:1px solid transparent;
}
 1
Author: SandRock,
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
2015-01-08 09:09:07

Neat CSS-only solution

Użyj poniższego kodu, aby przygotować bezkontentowe pierwsze dziecko do niezamierzenie poruszającego się div: 

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Zaletą tej metody jest to, że nie trzeba zmieniać CSS żadnego istniejącego elementu, a zatem ma minimalny wpływ na projekt. Następnie dodawany element jest pseudoelementem, który jest , a nie w drzewie DOM.

Wsparcie dla pseudoelementów jest szeroko rozpowszechnione: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, A IE 8+. Będzie to działać w każdej nowoczesnej przeglądarce(należy uważać na nowszą ::before, która nie jest obsługiwana w IE8).

Kontekst

Jeśli pierwszy potomek elementu ma margin-top, rodzic dostosuje swoją pozycję jako sposób na zwinięcie zbędnych marginesów. Dlaczego? Tak po prostu.

Biorąc pod uwagę następujący problem: 

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Możesz to naprawić, dodając dziecko z zawartością, taką jak prosta spacja. Ale wszyscy nie lubimy dodawać przestrzeni do tego, co jest tylko kwestią projektowania. Dlatego użyj właściwości white-space do fałszywych treści.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Gdzie position: relative; zapewnia prawidłowe pozycjonowanie fix. I white-space: pre; sprawia, że nie musisz dodawać żadnej treści - jak biała spacja - do poprawki. I upewnia się, że nigdy nie zobaczysz poprawki.

Być może trzeba dodać line-height: 0px; lub max-height: 0px;, aby upewnić się, że wysokość jest rzeczywiście zero w starożytnych przeglądarkach IE (nie jestem pewien). I opcjonalnie można dodać <!--dummy--> do niego w starych przeglądarkach IE, jeśli nie działa.

W skrócie, można zrobić wszystko to tylko za pomocą CSS (który eliminuje potrzebę dodawania rzeczywistego potomka do drzewa DOM HTML): 

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>
 1
Author: Yeti,
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
2017-11-13 09:39:00

Użycie top zamiast margin-top jest innym możliwym rozwiązaniem, jeśli jest to właściwe.

 0
Author: lamplightdev,
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
2014-11-20 10:57:32

Aby zapobiec "rodzicowi Div" użyj marginesu " dziecka div":
w rodzicu użyj css:

  • Float
  • Padding
  • Border
  • Overflow
 0
Author: bingo,
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
2018-03-11 06:00:47