Forum PHP.pl

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

Proszę o pomoc.

Pozdrawiam.

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

Abstrahując od tego, że tak nie powinno się robić.

To musisz pokazać kod online, normalnie powinno zadziałać.

To zależy od wielu czynników, przede wszystkim od przeglądarek, które różnie mogą interpretować tag <p> i od styli, które aktualnie posiadasz, może masz styl inline na tym tagach.

Spróbuj dać na p display: block; może pomoże.

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.

Collapsing margins

<p> = paragraph
Czyli jest to nowy akapit, formatowanie tekstu <br/> nowa linia <p> nowy akapit i tak należy sie stosować. W szczególności jeżeli używasz tinymce

[CSS] pobierz, plaintext 
display: inline;
[CSS] pobierz, plaintext 

?

&nbsp;

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 ).
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



A dlaczego miałby wypluć błąd? Walidator zobaczy 4 elementy blokowe jeden pod drugim, nic więcej - na pewno się do tego nie przyczepi

Co prawda specyfikacja nie stwierdza, że P nie może być pusty, jednak daje jasno do zrozumienia, że nie powinno się czegoś takiego stosować. Zresztą takie coś jak pusty akapit nie ma żadnego sensu semantycznego więc już z definicji HTML-a jest niepoprawne.

Wiem, że w3c odradza używanie pustych akapitów, ale ja napisałem, że do pustego <p></p> walidator się nie przyczepi - i nie przyczepi się, błędu, a nawet ostrzeżenia nie pokaże Więc bardziej jest to nieeleganckie niż niepoprawne.
Natomiast czy ma to sens czy nie? Raczej nie ma, a już na pewno nie w przypadku powyżej, ale na upartego można załadować treść pochodzącą z AJAX-a właśnie do pustego akapitu więc myślę, że wtedy jego użycie jest (przynajmniej częściowo) uzasadnione.

@vonski: Walidator na stronie W3C jest raczej słabym narzędziem, który nie wyłapuje wielu błędów / niezgodności. To tak tylko na marginesie.