Dlaczego ten styl CSS margin-top nie działa?
Staram się dodać wartości marginesu na div wewnątrz innego div. Wszystko działa dobrze, z wyjątkiem najwyższej wartości, wydaje się być ignorowane. Ale dlaczego?
Czego oczekiwałem:
Co dostaję:
Kod:
#outer {
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto 0 auto;
display: block;
}
#inner {
background: #FFCC33;
margin: 50px 50px 50px 50px;
padding: 10px;
display: block;
}
<div id="outer">
<div id="inner">
Hello world!
</div>
</div>
W3Schools nie ma wyjaśnienia, dlaczego margines zachowuje się w ten sposób.
11 answers
Widzisz górny margines elementu #inner
zwijający się do górnej krawędzi elementu #outer
, pozostawiając tylko margines #outer
nienaruszony (choć nie pokazany na zdjęciach). Górne krawędzie obu pól są równo względem siebie, ponieważ ich marginesy są równe.
Oto istotne punkty ze specyfikacji W3C:
8.3.1 zwijanie marginesów
W CSS, przylegające marginesy dwóch lub więcej pól (które mogą lub nie mogą być rodzeństwo) może łączyć się tworząc pojedynczy margines. Marginesy, które łączą się w ten sposób, nazywa się zwinięciem , a wynikowy łączny margines nazywany jest zwiniętym marginesem .
Przylegające marginesy pionowe zwijają się [...]
Dwa marginesy są sąsiadujące wtedy i tylko wtedy, gdy:
- oba należą do pól blokowych w przepływie, które uczestniczą w tym samym kontekście formatowania bloków
- no line boxes, no w 1999 roku w ramach programu "Horyzont 2020" w ramach programu "Horyzont 2020" zrealizowano]}
- oba należą do sąsiadujących pionowo krawędzi pudełka, tzn. tworzą jedną z następujących par:
- górny margines pudełka i górny margines jego pierwszego dziecka w przepływie
Powód, dla którego wykonanie którejkolwiek z poniższych czynności zapobiega zapadaniu się marginesu:
- Pływający jeden z Twoich
div
elementów - tworzenie jednego z elementów
div
inline bloki - ustawienie
overflow
z dnia#outer
doauto
(lub dowolna wartość inna niżvisible
)
Jest ponieważ:
- marginesy pomiędzy pływającym pudełkiem a dowolnym innym pudełkiem nie zapadają się (nawet między pływającym a jego dziećmi w przepływie).
- marginesy elementów, które tworzą nowe konteksty formatowania bloków (takie jak pływaki i elementy z "przepełnieniem" innym niż "widoczny") nie zapadają się wraz z ich potomkami in-flow.
- marginesy skrzynki inline-block nie zapadają się (nawet w przypadku dzieci in-flow).
Lewy i prawy margines zachowują się zgodnie z oczekiwaniami, ponieważ:
Poziome marginesy nigdy się nie zapadają.
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:54
Spróbuj użyć display: inline-block;
na wewnętrznym div.
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:block;
}
#inner {
background:#FFCC33;
margin:50px 50px 50px 50px;
padding:10px;
display:inline-block;
}
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-04-30 03:45:37
To, o czym wspomniał @BoltClock, jest dość solidne. I tutaj chcę tylko dodać kilka innych rozwiązań tego problemu. sprawdź to w3c_collapsing margin . Zielone części są potencjalną myślą, jak ten problem można rozwiązać.
Rozwiązanie 1
Marginesy pomiędzy pływającym pudełkiem a dowolnym innym pudełkiem nie zapadają się (nawet między pływającym a jego dziećmi w przepływie).
Oznacza to, że mogę dodać float:left
do #outer
lub #inner
demo1 .
Zwróć również uwagę, że float
unieważni auto
na marginesie.
Rozwiązanie 2
Marginesy elementów, które tworzą nowe konteksty formatowania bloków (takie jak pływaki i elementy z "przepełnieniem" innym niż "widoczny") nie zapadają się wraz z ich potomkami in-flow.
Inne niż visible
, dodajmy overflow: hidden
do #outer
. A ten sposób wydaje się dość prosty i przyzwoity. Podoba mi się.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Rozwiązanie 3
Marginesy absolutnie umieszczonych pudełek nie zapadają się (nawet z ich dziećmi w przepływie).
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
Lub
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
Te dwie metody przerwą normalny przepływ div
Rozwiązanie 4
Marginesy skrzynek inline-block nie zapadają się (nawet w przypadku dzieci in-flow).
To to samo co @enderskill
Rozwiązanie 5
Nie ma to wiele wspólnego z pytaniem, ponieważ jest to spadający margines między rodzeństwem. zazwyczaj oznacza to, że top-box maDolny margines element na poziomie bloku w przepływie zawsze zapada się z górnym marginesem jego następnego rodzeństwa na poziomie bloku w przepływie, chyba że rodzeństwo ma prześwit.
margin-bottom: 30px
, a brat-box ma margin-top: 10px
. Całkowity margines między nimi wynosi 30px
zamiast 40px
.
Rozwiązanie 6
Górny margines elementu blokowego w przepływie zwija się z górnym marginesem dziecka na poziomie pierwszego bloku w przepływie, jeśli element nie ma górnej krawędzi, górnej wyściółki, a dziecko nie ma prześwitu.
To jest bardzo interesujące i mogę po prostu dodać jedną górną linię graniczną
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
A także <div>
jest domyślnym poziomem bloku, więc nie musisz go deklarować celowo. Sorry za nie jest w stanie opublikować więcej niż 2 Linki i zdjęcia ze względu na moją reputację nowicjusza. Przynajmniej wiesz, skąd ten problem bierze się następnym razem. coś podobnego.
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-09 22:42:15
Nie wiem dlaczego to co masz nie działa, ale możesz dodać
overflow: auto;
Do zewnętrznego 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
2012-03-01 16:23:28
Jeśli dodasz jakieś wypełnienie do #outer
, to działa.
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:block;
padding-top:1px;
}
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-04-30 03:45:47
Nie do końca wiem dlaczego, ale zmieniając wewnętrzny CSS na
display:inline-block;
Wydaje się działać;
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-03-01 16:22:36
Nie odpowiada "dlaczego" (musi być coś z marginesem załamania), ale wydaje się, że najprostszym / najbardziej logicznym sposobem na zrobienie tego, co próbujesz zrobić, byłoby po prostu dodanie padding-top
do zewnętrznego div :
Minor note - nie powinno być konieczne ustawianie div na display:block;
, chyba że w Twoim kodzie jest coś innego, co mówi, że nie ma być block.
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-03-01 16:28:40
Spróbuj tego:
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:table;
}
#inner {
background:#FFCC33;
margin:50px 50px 50px 50px;
padding:10px;
display:block;
}
Powodzenia
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-04-30 03:45:57
Myślę, że ustawienie pozycji właściwości #innerdiv na relative może również pomóc w osiągnięciu efektu. Ale tak czy inaczej próbowałem oryginalnego kodu wklejonego w Pytaniu na IE9 i najnowszym Google Chrome i już dają pożądany efekt bez żadnych modyfikacji.
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-03-06 18:34:15
Użyj padding-top:50px
do zewnętrznego div. Coś takiego:
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:table;}
Uwaga: padding zwiększy rozmiar Twojego div. W tym przypadku, jeśli rozmiar Twojego div jest ważny, mam na myśli, czy musi mieć określoną wysokość. zmniejsz wysokość o 50px.:
#outer {
width:500px;
height:150px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:table;}
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-04-30 03:46:08
Próbowałeś?ważne przede wszystkim, to wszystko wymusi:
margin:50px 50px 50px 50px !important;
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-03-13 09:01:02