Elementy potomne z marginesami w DIVs

Potrzebuję dwóch kolejnych divs (z tłem), aby dotykały się bezproblemowo, jeden pod drugim. Jednak ten układ psuje się, gdy umieszczam element potomny {[2] } Na Dole div. Marginesy elementu p wymuszają pustą lukę między obiema div s. jest to dziwne zachowanie, ponieważ oczekuję, że margines p pozostanie w obszarze zawartości i tła div. Renderuje w ten sam sposób na Firefoksie, Chrome i IE 8.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>

Oto Jak to wygląda na przykład.

Obrazek przedstawiający górny div (niebieski), następnie białą szczelinę, a następnie dolny div (różowy). Biała szczelina nie powinna być obecna.

Mógłbym to naprawić, zmieniając marginesy na paddings dla elementu p, ale musiałbym to zrobić również z elementami nagłówka, elementami listy i innymi elementami, których chcę użyć na początku div. To nie jest pożądane.

Czy ktoś mógłby mnie oświecić: jakie zastrzeżenie modelu pudełkowego mi brakuje? Czy istnieje łatwy sposób, aby to naprawić, najlepiej modyfikując Styl div?

Author: Mark Amery, 2009-12-10
Source

4 answers

To jest oczekiwane zachowanie *. Jest kilka sposobów na obejście tego. Jeśli unosisz divy, będą one zawierać marginesy elementów potomnych i zapobiegać zapadaniu się marginesów. Innym podejściem jest dodanie obramowania lub wypełnienia do div.

* marginesy div I p "łączą się tworząc pojedynczy margines", mimo że są zagnieżdżone, ponieważ mają przylegające marginesy bez wypełnienia lub granicy między nimi.

 12
Author: No Surprises,
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-12-10 06:33:38

Dodaj overflow: hidden LUB overflow: auto do div

 26
Author: K Prime,
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-12-10 06:32:34

Rozwiązanie 1

Dodaj overflow: hidden / auto do zawierającego div, aby zapobiec zapadaniu się marginesu.

Rozwiązanie 2

Dodaj dodatnią wyściółkę do zawierającego div I równy ujemny margines do elementu wewnętrznego

Nowe Rozwiązanie

Dodaj padding 0.01 px do zawierającego div, zapobiegnie to zapadaniu się marginesu, ale nie będzie wymagało żadnego ujemnego marginesu na elemencie wewnętrznym.

 9
Author: Oisin Lavery,
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
2011-12-12 20:01:53

Ustawienie dodatniego wypełnienia i odpowiadającego ujemnego marginesu na elemencie div wydaje się rozwiązywać problem, choć Nie wiem dlaczego.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>
 1
Author: Alan Haggai Alavi,
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-12-10 06:33:18