Czy źle jest zmienić element blokowy na inline z CSS, jeśli zawiera inny element blokowy?

Wiem, że umieszczanie elementu blokowego wewnątrz elementu inline jest złe, ale co z poniższym?

Wyobraź sobie ten ważny znacznik: 

<div><p>This is a paragraph</p></div>

Teraz dodaj ten CSS: 

div {
   display:inline;
}

Tworzy to sytuację, w której element inline zawiera element blokowy (div staje się elementem inline, A P domyślnie jest blokiem)

Czy elementy strony są nadal ważne?

Jak i kiedy oceniamy czy HTML jest poprawny-przed czy po regułach CSS są aplikował?

UPDATE: od tego czasu dowiedziałem się, że w HTML5 jest idealnie poprawne umieszczanie elementów poziomu bloku wewnątrz tagów linków np: 

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

Jest to naprawdę przydatne, jeśli chcesz, aby duży blok HTML był linkiem.

Author: Matthew James Taylor, 2009-04-14
Source

9 answers

From the CSS 2.1 Spec :

Gdy Skrzynka inline zawiera skrzynkę in-flow na poziomie bloku, Skrzynka inline (i jej przodkowie in-Flow w tym samym polu liniowym) są łamane wokół skrzynki blokowej (i wszelkie rodzeństwo na poziomie bloku, które są kolejne lub oddzielone tylko składanymi białymi spacjami i/lub elementami out-of-flow), dzieląc skrzynkę inline na dwa pola(nawet jeśli każda strona jest pusta), po jednym po każdej stronie pudełka (- ów) na poziomie bloku. Skrzynie liniowe przed przerwą i po przerwie są zamknięte w anonimowych skrzynkach blokowych, a skrzynka na poziomie bloku staje się rodzeństwem tych anonimowych skrzynek. Gdy takie pole inline ma wpływ na względne pozycjonowanie, wszelkie tłumaczenie wynikowe wpływa również na pole na poziomie bloku zawarte w polu inline.

Ten model będzie miał zastosowanie w poniższym przykładzie, jeśli następujące zasady: 

p    { display: inline }
span { display: block }

Zostały użyte z tym dokumentem HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>

Element P zawiera fragment (C1) anonymous tekst, po którym następuje element na poziomie bloku, po którym następuje kolejny fragment (C2) tekstu anonimowego. Wynikowe pudełka byłyby skrzynką reprezentującą ciało, zawierającą anonimową skrzynkę wokół C1, skrzynkę rozpiętości i inną anonimową skrzynkę wokół C2.

Właściwości anonimowych pól są dziedziczone z załączającego nie-anonimowego pola(np. w przykładzie poniżej podrozdziału "anonimowe pola bloków", ten dla DIV). Nie dziedziczone nieruchomości mają swoje wartość początkowa. Na przykład czcionka anonimowego pola jest dziedziczona z DIV, ale marginesy będą równe 0.

Właściwości ustawione na elementach, które powodują generowanie anonimowych pól blokowych, nadal mają zastosowanie do pól i zawartości tego elementu. Na przykład, jeśli obramowanie zostało ustawione na elemencie P w powyższym przykładzie, obramowanie zostanie narysowane wokół C1 (otwarte na końcu linii) i C2 (otwarte na początku linii).

Niektórzy agenci Użytkownika mają zaimplementowane granice w wierszach zawierających bloki w inny sposób, np. poprzez zawijanie takich zagnieżdżonych bloków wewnątrz "anonimowych pól linii" i tym samym rysowanie obramowań linii wokół takich pól. Ponieważ CSS1 i CSS2 nie zdefiniowały tego zachowania, agenci użytkowników CSS1-only i CSS2-only mogą zaimplementować ten alternatywny model i nadal twierdzić zgodność z tą częścią CSS 2.1. Nie dotyczy to UAs opracowanych po wydaniu tej specyfikacji.

Zrób z tego, co chcesz. Ewidentnie zachowanie jest określone w CSS, chociaż czy obejmuje wszystkie przypadki, czy jest wdrażany konsekwentnie we współczesnych przeglądarkach nie jest jasne.
 23
Author: Alohci,
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
2013-05-09 02:29:07

Niezależnie od tego, czy jest poprawna, czy nie, struktura elementu jest błędna. Powodem, dla którego nie umieszczasz elementów blokowych wewnątrz elementów wbudowanych, jest to, że przeglądarka może renderować te elementy w łatwy do przewidzenia sposób.

Nawet jeśli nie łamie żadnych reguł dla HTML lub CSS, nadal tworzy elementy, które nie mogą być renderowane zgodnie z przeznaczeniem. Przeglądarka musi obsługiwać elementy tak, jakby kod HTML był nieprawidłowy.

 14
Author: Guffa,
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-04-14 06:40:55

HTML i CSS będą nadal ważne. Idealnie, nie musiałbyś robić czegoś takiego, ale ten konkretny kawałek CSS jest w rzeczywistości poręcznym (i poprawnym składniowo, ale nie poprawnym semantycznie) sposobem na uzyskanie błędu podwójnego marginesu przeglądarki Internet Explorer bez uciekania się do warunkowych arkuszy stylów lub hacków, które unieważnią Twój CSS. (X) HTML ma większą wartość semantyczną niż CSS, więc mniej ważne jest, aby CSS był semantycznie poprawny. Moim zdaniem jest to dopuszczalne, ponieważ rozwiązuje irytujący problem z przeglądarką bez unieważniania kodu.

 5
Author: VirtuosiMedia,
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-04-14 06:50:06

HTML jest sprawdzany niezależnie od CSS, więc strona nadal będzie ważna. Jestem całkiem pewien, że specyfikacja CSS też nic o tym nie mówi, ale nie Cytuj mnie w tym. Jednak byłbym bardzo ostrożny używając takiej techniki, ponieważ chociaż może ona renderować zgodnie z przeznaczeniem w niektórych przeglądarkach, musisz je wszystkie przetestować-nie widzę wielu gwarancji.

 2
Author: Samir Talwar,
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-04-14 06:41:09

Czy elementy strony są nadal ważne?

"poprawny" w sensie HTML, tak; HTML nic nie wie o CSS.

Renderowanie, które dostajesz w przeglądarce, jest jednak "niezdefiniowane" przez specyfikację CSS, więc może wyglądać jak cokolwiek. Chociaż możesz umieścić taką regułę w hackach CSS skierowanych do jednej konkretnej przeglądarki (gdzie wiesz, jak ta przeglądarka renderuje ten przypadek), nie powinna być ona podawana przeglądarkom w ogóle.

 1
Author: bobince,
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-04-14 12:52:45

Nie wiem z góry, czy to waliduje jakieś reguły, ale zalecałbym użycie W3C HTML Validator i W3C CSS Validator , aby to określić. Mam nadzieję, że to pomoże!

 0
Author: Adam Alexander,
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-04-14 06:35:37

Myślę, (x)html jest poprawny, css jest poprawny. Czy wynik jest ważny? Tak, jeśli szuka w przeglądarce, jak chcesz.

 -1
Author: Sergei Kovalenko,
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-04-14 06:37:52

Nie, to nie jest zły wybór. Możemy użyć zgodnie z wymaganiami.

 -1
Author: ,
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-05-26 10:13:12

Jeśli jest jakaś logika, którą podążasz i realizujesz ją w ten sposób, to nie jest zła. Praca nie jest " zła " tylko dlatego, że jest dziwna. Tak, to dość nietypowe, ale pomaga i to nie jest błąd. To celowe. HTML i CSS powinny ci służyć, a nie na odwrót, więc nigdy nie słuchaj komentarzy mówiących, żebyś tego nie robił tylko dlatego, że jest brzydki.

Typowe jest nazywanie rozwiązania "nieprawidłowym" i sugerowanie długiej drogi wokół bloku. Czasami można przemyśleć co zrobiłeś. Ale może być wiele powodów tego, co zrobiłeś, a oni ich nie biorą pod uwagę.

Regularnie używam bloków wewnątrz linii.Jest ważne i działa - w większości przypadków nie jest to konieczne. I co z tego. Pamiętaj, kiedy XHTML kazał nam zawsze umieszczać cytaty wokół właściwości (i wszyscy krzyczeli na Ciebie, jeśli tego nie zrobiłeś!), teraz HTML5 pozwala je pominąć, jeśli w środku nie ma miejsca. Co się stało z ostatnim ukośnikiem po pojedynczych znacznikach? "
"? Chodź. Standardy się zmieniają. Ale przeglądarki nadal wspierają niestandardowe rzeczy, jak również. Centrum jest przestarzałe; jesteśmy w 2013 i nadal działa. Stół do centrowania pionowego? Czasami to jedyny sposób. DIV wewnątrz A, aby unosić się zgodnie z planem? Śmiało.

Skup się na ważnych rzeczach.

 -1
Author: dkellner,
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
2013-12-13 15:31:53