Margines wewnętrzny div wpływający na uwzględnienie marginesu div

Question

Mam wewnętrzny div wewnątrz zawierającego div.

HTML

<div id="container"> 
    <div id="inner"></div> 
</div> 

CSS

#container { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#inner { 
    margin: 30px; 
    width: 40px; 
    height: 40px; 
    background-color: black; 
} 

Fiddle

http://jsfiddle.net/8xUTJ/4/

Oczekuję tego, aby mała czarna skrzynka wyśrodkowany w pionie i poziomie w większym czerwonym polu. Zamiast tego dostaję czarne pudełko przyklejone do górnej części czerwonego pudełka, a czerwone pudełko ma margines-górny.

Czy ktoś może wyjaśnić, co według CSS tu robi?

Answer 1

Dodaj overflow:auto do #container div.

jsFiddle example

Albo

dodać obramowanie do #container div.

Możesz dowiedzieć się więcej na temat zachowania zwijania marginesów na W3C.

Answer 2

metoda 1

position:absolute dla wewnętrznej div, więc wieco być margines 30px od

http://jsfiddle.net/8xUTJ/5/

---

metody 2

display:inline-block dla wewnętrznej div

http://jsfiddle.net/8xUTJ/7/

---

metoda 3

border:solid 0 transparent do zewnętrznej div

http://jsfiddle.net/8xUTJ/8/

Wybieraj :)

Answer 3

Chociaż dostarczone rozwiązania są wykonalne, nikt nie wyjaśnia problemu. Nazywa się to zawijaniem brzegów, co ma miejsce w kilku scenariuszach.

Scenariusz 1 - te elementy będą oddalone tylko o 30 pikseli, ponieważ marginesy zwijają się razem, a większy ma pierwszeństwo.

<div style="margin-bottom: 20px"></div> 
<div style="margin-top: 30px"></div> 

Scenariusz 2 - (Twój scenariusz) margines polu wewnętrznym wylewa poza polem zewnętrznym.

<div class="outer"> 
    <div style="margin-top: 20px"></div> 
</div> 

Rozwiązaniem jest nadanie ramce zewnętrznej marginesu lub obramowanie (zgodnie z sugestią innych osób). Często używam następujący CSS na opakowaniu zewnętrznym w celu złagodzenia sytuacji tak:

.outer { 
    margin-top: -1px; 
    border-top: 1px solid transparent; 
} 

Answer 4

check to fiddle

Trzeba float wewnętrzny div aby pracować

#inner {  
    margin:30px; 
    float:left; /* give float */ 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}​ 

Albo podaj właściwość overflow:auto do div#container.

check to fiddle

Answer 5

Najpierw #container ma margin-top:0 i #inner ma margin-top:30px. Związek tych elementów ma związek z rodzicem i pierwszym dzieckiem.

Jeśli nie ma granic, wyściółka, zawartość inline lub odstęp oddzielić margin-top bloku z margin-top swojego pierwszego bloku dziecka lub bez obramowania, obicia, treści inline, wysokość, min-height lub max-height, aby oddzielić margines-dół bloku z marginesem-końcem ostatniego elementu potomnego, następnie marginesy zwinięte. Zawinięty margines kończy się poza rodzicem.

Margin zawaleniem środki marginesy te są połączone w jeden margines, którego wielkość jest największym marginesie połączone w to

Zasady te stosuje się również do marż, które są zerowe, więc margines pierwsze/ostatnie dziecko kończy się poza jego rodzica (zgodnie z zasadami powyżej), czy margines rodzica wynosi zero

to dlatego pl d z 30px górnego marginesu stosowanego na zewnątrz elementu #container, z skrzypce: