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.
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.
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;
}
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życiuborder-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;
}
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
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ć
przed elementem podrzędnym.
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;
}
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.
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>&</p>
<div id="child">
<p>&</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.
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.
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;
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;
}
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>
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.
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
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