¿Está mal cambiar un elemento de bloque a en línea con CSS si contiene otro elemento de bloque?

StackOverflow https://stackoverflow.com/questions/746531

  •  09-09-2019
  •  | 
  •  

Pregunta

Yo sé que está mal poner un elemento de bloque dentro de un elemento en línea, pero ¿qué pasa con el siguiente?

Imagine esto marcado válido: 

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

Ahora agregar 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 convierte en línea y el p es el bloqueo por defecto)

¿Son los elementos de la página sigue siendo válido?

¿Cómo y cuándo juzgamos si el HTML es válido - antes o después de aplicar las reglas CSS

ACTUALIZACIÓN: He aprendido que en HTML5 es perfectamente válida para poner elementos de bloque dentro de las etiquetas de enlace, por ejemplo: 

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

Esto es realmente muy útil si se desea un gran bloque de HTML para un enlace.

¿Fue útil?

Solución

Desde el CSS 2.1 Spec :

  

Cuando una caja de línea contiene una caja a nivel de bloque de flujo de entrada, la caja de línea (y sus ancestros en línea dentro de la misma caja de línea) se rompen alrededor de la caja a nivel de bloque (y cualquier hermanos a nivel de bloque que son consecutivos o separados sólo por espacios en blanco plegable elementos y / o fuera de flujo), la división de la caja en línea en dos cajas (incluso si cualquiera de los lados está vacío), una en cada lado de la caja a nivel de bloque (es). Las cajas de línea antes del descanso y después de la ruptura están encerrados en cajas de bloque anónimas, y la caja a nivel de bloque se convierte en un hermano de esas cajas anónimas. Cuando una caja de tal inline se ve afectado por el posicionamiento relativo, cualquier traducción resultante también afecta a la caja a nivel de bloque contenida en la caja de línea.

     

Este modelo se aplicaría en el siguiente ejemplo, si las reglas siguientes:

     
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 trozo (C1) de texto anónimo seguido de un elemento a nivel de bloque seguido de otro trozo (C2) de texto anónimo. Las cajas resultantes serían una caja de bloque que representa el cuerpo, que contiene una caja de bloque anónima alrededor de C1, la caja de bloque SPAN, y otra caja de bloque anónima alrededor de C2.

     

Las propiedades de cajas anónimas se heredan de la caja no anónimo que encierra (por ejemplo, en el ejemplo justo debajo de la subsección partida "cajas de bloque anónimos", el uno para DIV). Las propiedades no heredado tienen su valor inicial. Por ejemplo, la fuente de la caja anónima se hereda de la DIV, pero los márgenes será 0.

     

Las propiedades establecidas en los elementos que causan las cajas de bloque anónimas que se generen aún se aplican a las cajas y el contenido de ese elemento. Por ejemplo, si un borde se había fijado en el elemento de P en el ejemplo anterior, la frontera se dibuja alrededor C1 (abierto en el extremo de la línea) y C2 (abierta al inicio de la línea).

     

Algunos agentes de usuario han implementado fronteras en inlines que contienen bloques de otras maneras, por ejemplo, envolviendo dichos bloques anidados dentro "de cajas de línea anónimas" y por lo tanto dibujo fronteras en línea alrededor de tales cajas. Como CSS1 y CSS2 no definieron este comportamiento, los agentes de usuario y CSS2 sólo de sólo CSS1 pueden implementar este modelo alternativo y todavía reclamar la conformidad con esta parte de CSS 2.1. Esto no se aplica a las AU desarrollados después de esta especificación fue puesto en libertad.

Marca de que lo que se quiere. Es evidente que se especifica el comportamiento en el CSS, aunque si cubre todos los casos, o se ejecuta de forma consistente en todos los navegadores de hoy en día no está claro.

Otros consejos

Independientemente si es válido o no, la estructura del elemento que está mal. La razón por la que usted no pone elementos de bloque dentro de los elementos en línea es para que el navegador puede hacer que los elementos en una forma fácilmente predecible.

Incluso si no se rompe cualquier regla de HTML o CSS, todavía se crea elementos que no se pueden representar como es debido. El navegador tiene que manejar los elementos como si el código HTML no es válida.

El HTML y el CSS serán tanto seguir siendo válida. Idealmente, usted no tiene que hacer algo como esto, pero eso poco particular de CSS es en realidad una forma práctica (y sintácticamente válida, pero no semánticamente válida) para conseguir fallo margen doble de Internet Explorer sin tener que recurrir a hojas de estilo condicionales o hacks que invaliden CSS. El (X) HTML tiene más valor semántico de la CSS, por lo que es menos importante que la CSS es válido semánticamente. En mi mente, no es aceptable porque resuelve un problema del navegador molesto sin invalidar su código.

El HTML es validado de forma independiente de la CSS, por lo que la página seguiría siendo válida. Estoy bastante seguro de que la especificación CSS no dice nada al respecto tampoco, pero no me cito en que uno. Sin embargo, yo tendría mucho cuidado usando una técnica como esta, ya que si bien puede rendir como se pretende en algunos navegadores, que había necesidad de probar 'em all-No veo muchas garantías están realizando.

  

¿Son los elementos de la página sigue siendo válido?

“válido” en un sentido HTML, sí; HTML no sabe nada acerca de CSS.

La representación que se obtiene en el navegador, sin embargo, está ‘indefinido’ por la especificación CSS, por lo que podría parecerse a nada en absoluto. Mientras que usted podría incluir una norma de este tipo de hacks CSS dirigidas a un determinado navegador (donde se sabe cómo que el navegador hace que este caso), no se debe servir a los navegadores en general.

No sé de la parte superior de mi cabeza si esto valida cualquier regla, pero yo recomendaría usar el W3C HTML validador y la W3C CSS validador para determinar eso. Espero que esto sea útil!

No, no es una elección equivocada. Podemos utilizar según las necesidades.

Si hay una lógica que sigue y que terminan su aplicación como esta, No es malo. cosas de trabajo no son "mal" sólo porque son raros. Sí, es bastante inusual pero ayuda y no es un error. Es intencional. HTML y CSS deben servir a usted, no al revés por lo que no escucha nunca a los comentarios que le dice que no lo haga sólo porque es feo.

Es típico que llamar a una solución "no válido" y sugerir un largo camino alrededor de la manzana. A veces se puede reconsiderar lo que hizo. Pero no puede haber muchas razones por lo que hizo y que no consideran ellos.

.

hago uso de bloques dentro de inlines regularmente Es válido y que está funcionando - no es sólo necesario en la mayoría de los casos. Y qué. Recuerde que cuando XHTML nos dijo que poner siempre entre comillas propiedades (y todo el mundo te grita si no! Lo hizo), ahora HTML5 permite omitir si no hay espacio en el interior. Lo que sucedió a la última barra después de etiquetas singulares? "
"? Venga. Normas cambian. Pero los navegadores guardan apoyo cosas no estándar también. CENTRO está en desuso; estamos en 2013 y que todavía funciona. TABLA para el centrado vertical? A veces es la única manera. DIV dentro de un hacer flotar como lo planeado? Sólo seguir adelante.

centrarse en las cosas importantes.

Creo, (X) HTML es válido, CSS es válido. Es válido el resultado? Sí, si se está mirando en el navegador como desee.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top