Marginesy CSS; margines dodaje przestrzeń poza elementem nadrzędnym

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ę: Czego chcę....

...ale na tym kończę: Co dostaję...

Ź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 to 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ń. Wiem, że dodanie padding:1px; lub border:1px; rozwiązuje problem. Ale to tylko dodaje nowe problemy, ponieważ nie chcę wyściółki ani granicy na moich znaczników div.

Musi być lepsze, najlepsze rozwiązanie? To musi być dość powszechne.
Author: Temani Afif, 2012-11-27
Source

3 answers

Dodaj overflow:auto do swojego #page div.

Przykład JsFiddle

I sprawdź

 145
Author: j08691,
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
 21
Author: Ziarno,
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%;
}

Patrz Fiddle

 12
Author: jonBreizh,
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