Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Nowy akapit i brak nowej linii
Forum PHP.pl > Forum > Przedszkole
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;

  1. <p>tekst1</p>
  2. <p></p>
  3. <p></p>
  4. <p>tekst2</p>


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 smile.gif

Proszę o pomoc.

Pozdrawiam.
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.
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
  1. display: inline;

?

&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 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 smile.gif

Cytat
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? smile.gif Walidator zobaczy 4 elementy blokowe jeden pod drugim, nic więcej - na pewno się do tego nie przyczepi smile.gif
Crozin
Cytat
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 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. wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.