[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

[Damonsson]

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

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

[strife]

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.

Powód edycji: [strife]: Dopisanie mądrej myśli :)

[Crozin]

Collapsing margins

[potreb]

<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

[toaspzoo]

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

?

&nbsp;

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

[Crozin]

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.

[vonski]

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 (IMG:style_emoticons/default/smile.gif) 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.

[Crozin]

@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. (IMG:style_emoticons/default/wink.gif)