Elementos de bloque vs elementos en línea en HTML: ¿por qué la distinción?

15

La distinción entre elementos de bloque e inline siempre me pareció extraña. La diferencia es que un elemento de bloque ocupa todo el ancho, forzando un salto de línea antes y después del elemento, y un elemento en línea solo ocupa tanto como el contenido. ¿Por qué no solo tener un tipo de elemento: un elemento en línea donde también puede aplicar alto / ancho personalizado y usarlo? ¿Quieres saltos de línea? Inserte una <br />, o quizás agregue una etiqueta especial en el CSS para ese comportamiento. Tal como está ahora, no veo que resuelva ningún problema y, en cambio, solo fuerza una propiedad que, en mi opinión, debería decidir un diseñador.

Entonces, ¿por qué los dos tipos?

EpsilonVector
fuente
Mi parte favorita de esta pregunta es cómo usa un estilo en línea para <br/>, y una <p>etiqueta para separar la última línea del primer párrafo. Tal vez debería comenzar a buscar grandes diferencias en la intención visual en lugar de las diferencias en la implementación.
riwalk
1
Si bien creo 100% que los elementos de bloque son útiles y no están de acuerdo con su solución propuesta, esta sigue siendo una gran pregunta.
Nicole

Respuestas:

13

Tu dices:

¿Quieres saltos de línea? Inserte una <br />, o quizás agregue una etiqueta especial en el CSS para ese comportamiento. Tal como está ahora, no veo que resuelva ningún problema y, en cambio, solo fuerza una propiedad que, en mi opinión, debería decidir un diseñador.

Estás en el camino correcto: el diseñador debe decidir el estilo.

Pero, tienes el problema al revés. Insertar una <br/>etiqueta es en realidad la opción que "fuerza una propiedad que debe ser decidida por un diseñador", dentro del documento de marcado, una vez que <br/>está allí, está allí, y solo con un poco de CSS complicado puede eliminar su efecto.

Inline / block elements, por otro lado, son elementos puramente diseñados con un conveniente valor predeterminado para el caso de uso común. La propiedad visual en sí misma puede ser cambiada instantáneamente por un diseñador CSS con display:inlineo display:block.

Tomemos, por ejemplo, el elemento común para la navegación en estos días - <li>. Estos son blockelementos predeterminados , pero los diseñadores harán que floataparezcan en línea ( blocktiene más propiedades especiales que solo ocupar toda la línea, pero esa es una conversación para otro día).

Nicole
fuente
3

La mayoría de los elementos tienen un formato estándar ... Su pregunta podría extenderse para decir que este formato debería ser también una decisión del diseñador y debería eliminarse. Siempre pensé que era un punto de partida y eliminaba el formato si era necesario (a menudo no lo era). Pero al final hay algunas cosas que son naturales. Si tiene un párrafo, por ejemplo, espera que sea un elemento de bloque porque esa es la naturaleza de un párrafo. Independientemente de si los elementos tienen o no una configuración predeterminada, como bloque o en línea, definitivamente de cualquier manera querría la capacidad de especificar esta opción. La razón por la que digo esto es IMO, es más limpio romper las cosas de esta manera en lugar de tirar<br />en el HTML. ¿Hace lo mismo? Si. Pero con los recientes avances en HTML, un gran esfuerzo se centró en hacerlo más un lenguaje semántico en el que se pone menos en el HTML en cuanto al formato y más en el CSS. El <br />salto de línea significa que normalmente se refiere a un salto de línea en un párrafo u otra oración que contiene la estructura. Al final no me importa, pero personalmente quiero tener la capacidad de tener bloqueo y distinción en línea, ¡así que espero que nunca eliminen eso del lado CSS al menos!

Kenneth
fuente
2

Esto es como decir que no hay una diferencia real entre párrafos y oraciones. Los párrafos delimitan un grupo de ideas. Típicamente, una oración es para una sola idea.

El marcado es sobre semántica, no sobre visualización. De hecho, un diseñador es libre de tratar cualquier elemento que esté predeterminado en un estilo de bloque como en línea y viceversa.

Ismael
fuente
2

En LaTeX , hay dos modos (sin incluir el modo matemático): el modo horizontal y el modo vertical. Los elementos (caracteres) son pequeños cuadros que se acumulan "horizontalmente" en el párrafo. Entonces estas cajas más grandes se acumulan verticalmente. Esto es similar a (X) HTML: en línea y bloque.

Olivier Pirson
fuente
0

A mí me parece un problema de compatibilidad con versiones anteriores. El elemento en línea probablemente fue una adición posterior al estándar HTML, y para que las páginas web escritas en 1992 todavía se puedan ver en 2011, todavía es compatible, ¡como si hubiera un montón de páginas web de 19 años ...!


fuente
-1

Creo que los modos de visualización son tan diferentes entre bloque y en línea, que vale la pena hacer una distinción a nivel de marcado.

JoeM05
fuente