Margines CSS; margines dodaje spację poza elementem nadrzędnym [duplikat]
Moje marginesy css nie zachowują się tak, jak chcę lub oczekuję. Wydaje mi się, że mój nagłówek margin-top wpływa na otaczające go znaczniki div.
Tego chcę i oczekuję:
...ale tak to się kończy:
Źródło:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
Wyolbrzymiłem margines w tym przykładzie. Domyślny margines przeglądarki na h1-tag jest nieco mniejszy, a w moim przypadku używam Twitter Bootstrap, z Normalizerem.css , który ustawia domyślny margines na 10px. Nie tak ważne, najważniejsze jest to, że nie mogę, nie powinienem, nie chcę zmieniać marginesu na znaczniku h1.
Myślę, że jest to podobne do mojego innego pytania; dlaczego ten styl CSS margin-top nie działa?. Pytanie brzmi, jak rozwiązać ten konkretny problem?
Przeczytałem kilka wątków na podobne problemy, ale nie znalazłem żadnych prawdziwych odpowiedzi i rozwiązań. I wiedz, że dodanie padding:1px; lub border:1px; rozwiązuje problem. Ale to tylko dodaje nowe problemy, ponieważ nie chcę wypełnienia ani granicy na moich znaczników div.
Musi być lepsze, najlepsze rozwiązanie? To musi być dość powszechne.
8 answers
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
2012-11-26 21:49:28
Dodaj dowolną z następujących zasad:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
Jest to spowodowane przez collapsing margins. Zobacz artykuł o tym zachowaniu tutaj .
Zgodnie z artykułem:
Specyfikacja W3C definiuje marginesy zwijania w następujący sposób:
" w tej specyfikacji wyrażenie zwijanie marginesów oznacza, że przylegające marginesy (bez niepustej zawartości, wypełnienia lub obszarów granicznych lub odstępów) dwóch lub więcej pól (które mogą znajdować się obok siebie lub zagnieżdżone) łączą się tworząc pojedynczy margines."
Dotyczy to również elementów rodzic-dziecko.
Wszystkie odpowiedzi zawierają jedno z możliwych rozwiązań:
Są inne sytuacje, w których elementy nie mają swoich marginesów:
- elementy pływające
- absolutnie pozycjonowane elementy
- inline-block elements
- elementy z przepełnieniem ustawione na coś innego niż widoczne (nie zwijają marginesów z ich dzieci.)
- wyczyszczone elementy (nie zwijają górnych marginesów z dolnym marginesem bloku nadrzędnego.)
- element root
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-02-20 22:41:45
Problem polegał na tym, że rodzic nie uwzględniał wzrostu dzieci. Dodanie display:inline-block; zrobiło to dla mnie.
Full CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
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-01-06 12:18:04
Wystarczy dodać border-top: 1px solid transparent; do swojego #page elementu.
Dwa marginesy sąsiadują wtedy i tylko wtedy, gdy:
- brak pól linii, brak prześwitu, brak wypełnienia i brak obramowania oddzielają je
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
2020-02-13 21:26:28
Dodaj następującą regułę:
overflow: hidden;
Jest to spowodowane spadaniem marginesów. Zobacz artykuł o tym zachowaniu tutaj .
Zgodnie z artykułem:
Jeśli element nadrzędny nie ma górnego wypełnienia lub mniej górnego marginesu, to jego pierwszy element potomny, to elementy są renderowane w sposób, który sprawia, że element nadrzędny wydaje się mieć margines elementu potomnego. Tak więc może się to zdarzyć wszędzie na stronie, gdzie te warunki są spełnione, ale wydaje się to być najbardziej oczywiste w na górze strony.
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
2020-05-03 09:32:13
#page {
overflow: hidden;
margin:0;
background:#FF9;
}
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
2020-05-03 11:52:36
Moje podejście, kiedy tworzyłem style dla XenForo 2.1, ale powinno być przydatne dla Ciebie: (Proszę zastąpić te mniej zmiennych do rzeczywistych wartości. Również wartość bezwzględna marginesów mniejszych jest taka sama jak wysokość pseudo elementów przed-po.)
// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
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
2020-05-15 02:02:55
Rozwiązania w innych odpowiedziach nie zadziałały dla mnie. Przezroczyste obramowania, inline-block, itp., wszystkie powodowały inne problemy. Zamiast tego dodałem następujący css do mojego elementu przodka:
parent::after{
content: "";
display: inline-block;
clear: both;
}
W zależności od sytuacji może to powodować własne problemy, ponieważ dodaje dodatkowe miejsce po ostatnim elemencie potomnym.
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-11-26 22:15:34