[CSS][HTML]Nowy akapit i brak nowej linii Opcje

[MarcinUser]

Witam,
Mój problem wydaje się dość banalny. Cały czas było wszystko ok ale ostatnio coś się popsuło. Chodzi o znacznik html <p>, który ma styl css: margin: 15px 0;

[HTML] pobierz, plaintext 
<p>tekst1</p>
<p></p>
<p></p>
<p>tekst2</p>
[HTML] pobierz, plaintext 

Czemu nie mam dwóch pustych linijek i automatycznie większego odstępu pomiędzy tekst1 i tekst2? Styl CSS jest dobrze zastosowany, sprawdzałem w Firebugu. Wcześniej dobrze działało, teraz jest to ignorowane i muszę dawać nam białą spację.

Wiem, że można inaczej zrobić te odstępy, na przeróżne sposoby ale mi chodzi konkretnie o ten przykład (IMG:style_emoticons/default/smile.gif)

Proszę o pomoc.

Pozdrawiam.

Ten post edytował MarcinUser 7.02.2012, 22:32:02

[vonski]

To jest normalne zachowanie i nieważne czy otwierasz to pod IE czy pod najnowszym Firefoxem - uzyskasz taki sam efekt.
Ponieważ <p> jest elementem blokowym, rozpycha się na szerokość, ale nie na wysokość, a ty nie nadajesz stylami żadnej wysokości, dlatego te elementy, które nie zawierają tekstu mają wysokość 0 i ich marginesy łączą się w jeden (to jest tzw. zapadanie się marginesów, czyli margin collapsing). Nadaj któremuś z pustych <p> jakąś wysokość, nawet 1px to zobaczysz, że wtedy odstęp między "tekst1" i "tekst2" powiększy się i to o więcej niż o 1px (o 16px dokładnie (IMG:style_emoticons/default/smile.gif) ).
Jeśli chcesz koniecznie robić odstępy pomiędzy paragrafami za pomocą pustych <p></p>zamień margin na padding, wtedy każdy pusty <p> będzie miał wysokość 30px. No a najlepiej po prostu odpowiednio ostyluj te <p></p> w których jest tekst a te puste wywal (IMG:style_emoticons/default/smile.gif)

Pamiętaj też, że jak chcesz sobie zrobić odstęp to tego typu rozwiązanie z pustymi tagami nie jest dobre, i jak dobrze pamiętam przez validator w3c wypluje errora hm.

A dlaczego miałby wypluć błąd? (IMG:style_emoticons/default/smile.gif) Walidator zobaczy 4 elementy blokowe jeden pod drugim, nic więcej - na pewno się do tego nie przyczepi (IMG:style_emoticons/default/smile.gif)