¿Está mal cambiar un elemento de bloque para alinearlo con CSS si contiene otro elemento de bloque?
Sé que está mal poner un elemento de bloque dentro de un elemento en línea, pero ¿qué pasa con lo siguiente?
Imagine este marcado válido:
<div><p>This is a paragraph</p></div>
Ahora agrega este CSS:
div {
display:inline;
}
Esto crea una situación en la que un elemento en línea contiene un elemento de bloque (el div se vuelve en línea y p es bloque de forma predeterminada)
¿Siguen siendo válidos los elementos de la página?
¿Cómo y cuándo juzgamos si el HTML es válido, antes o después de aplicar las reglas CSS?
ACTUALIZACIÓN: Desde entonces aprendí que en HTML5 es perfectamente válido colocar elementos a nivel de bloque dentro de etiquetas de enlace, por ejemplo:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
En realidad, esto es realmente útil si desea que un bloque grande de HTML sea un enlace.
De la especificación CSS 2.1 :
Cuando un cuadro en línea contiene un cuadro a nivel de bloque de flujo entrante, el cuadro en línea (y sus antecesores en línea dentro del mismo cuadro de línea) se dividen alrededor del cuadro a nivel de bloque (y cualquier hermano a nivel de bloque que sea consecutivo o esté separado solo por espacios en blanco plegables y/o elementos fuera de flujo), dividiendo el cuadro en línea en dos cuadros (incluso si cualquiera de los lados está vacío), uno a cada lado de los cuadros a nivel de bloque. Los cuadros de línea antes y después del corte están encerrados en cuadros de bloque anónimos, y el cuadro a nivel de bloque se convierte en un hermano de esos cuadros anónimos. Cuando dicho cuadro en línea se ve afectado por el posicionamiento relativo, cualquier traducción resultante también afecta el cuadro a nivel de bloque contenido en el cuadro en línea.
Este modelo se aplicaría en el siguiente ejemplo si se cumplieran las siguientes reglas:
p { display: inline } span { display: block }se utilizaron con este documento 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>El elemento P contiene un fragmento (C1) de texto anónimo seguido de un elemento a nivel de bloque seguido de otro fragmento (C2) de texto anónimo. Los cuadros resultantes serían un cuadro de bloque que representa el CUERPO, que contendrá un cuadro de bloque anónimo alrededor de C1, el cuadro de bloque SPAN y otro cuadro de bloque anónimo alrededor de C2.
Las propiedades de los cuadros anónimos se heredan del cuadro no anónimo adjunto (por ejemplo, en el ejemplo justo debajo del encabezado de la subsección "Cuadros de bloques anónimos", el de DIV). Las propiedades no heredadas tienen su valor inicial. Por ejemplo, la fuente del cuadro anónimo se hereda del DIV, pero los márgenes serán 0.
Las propiedades establecidas en los elementos que provocan que se generen cuadros de bloques anónimos aún se aplican a los cuadros y al contenido de ese elemento. Por ejemplo, si se hubiera establecido un borde en el elemento P en el ejemplo anterior, el borde se dibujaría alrededor de C1 (abierto al final de la línea) y C2 (abierto al inicio de la línea).
Algunos agentes de usuario han implementado bordes en líneas que contienen bloques de otras maneras, por ejemplo, envolviendo dichos bloques anidados dentro de "cuadros de líneas anónimas" y dibujando así bordes en línea alrededor de dichos cuadros. Como CSS1 y CSS2 no definieron este comportamiento, los agentes de usuario solo CSS1 y CSS2 pueden implementar este modelo alternativo y aun así afirmar conformidad con esta parte de CSS 2.1. Esto no se aplica a las UA desarrolladas después de la publicación de esta especificación.
Haz de eso lo que quieras. Claramente, el comportamiento se especifica en CSS, aunque no está claro si cubre todos los casos o si se implementa de manera consistente en los navegadores actuales.
Independientemente de si es válido o no, la estructura del elemento es incorrecta. La razón por la que no coloca elementos de bloque dentro de elementos en línea es para que el navegador pueda representar los elementos de una manera fácilmente predecible.
Incluso si no infringe ninguna regla de HTML o CSS, crea elementos que no se pueden representar como se esperaba. El navegador debe manejar los elementos como si el código HTML no fuera válido.
Tanto el HTML como el CSS seguirán siendo válidos. Idealmente, no tendría que hacer algo como esto, pero esa parte particular de CSS es en realidad una forma útil (y sintácticamente válida pero no semánticamente válida) de solucionar el error de doble margen de Internet Explorer sin recurrir a hojas de estilo condicionales o trucos que invaliden tu CSS. El (X)HTML tiene más valor semántico que el CSS, por lo que es menos importante que el CSS sea semánticamente válido. En mi opinión, es aceptable porque resuelve un molesto problema del navegador sin invalidar su código.
