4. HTML: elementos "en linea" y "de bloque"

-

Elementos "en linea" vs "de bloque"

Podemos dividir los elementos HTML entre elementos "en linea" y "de bloque".

La diferencia entre ellos estriba en el espacio que en realidad ocupan horizontalmente.Veamos que quiere decir esto.

Aparentemente, el espacio que ocupan todos los elementos HTML en una página es el que corresponde a su contenido. En realidad NO ocurre así con lo es elementos "de bloque".

 Es decir:

  • Los elementos "en linea" horizontalmente ocupan el espacio que ocupa su contenido.
  • Pero los elementos "de bloque" ocupan el 100% del ancho de su contenedor.

Ejemplo: la siguiente página web contiene un encabezado y una imagen.

¿Cuanto espacio ocupan en realidad por defecto cada uno de los elementos?

En la anterior imagen, la caja roja representa el espacio que en realidad está ocupando el encabezado. Como vemos, el area que ocupa el elemento en la página no se limita al espacio que ocupa el texto, si no que se extiende hasta el extremo derecho de la página. Esto ocurre porque la etiqueta <h1> es un elemento "de bloque".

El hecho de que el encabezado se extendienda hasta el margen derecho de la página, tiene como consecuencia que el siguiente elemento (<img>) se posicione debajo de él, en vez de a su derecha.

A diferencia del encabezado, el espacio que ocupa la imagen (caja verde) es el mismo que el que está ocupando su contenido (la imagen). Esto ocurre porque la etiqueta <img> es un elemento "en linea".

Elementos "en linea"

Los elementos "en linea" son los siguientes:

Elementos "de bloque"

Los elementos "de bloque" son los siguientes:


El inspector de HTML: comprobemos lo que ocupa cada elemento en realidad.

A través del inspector HTML de cualquier navegador, es posible ver lo que ocupa en realidad cada elemento HTML.


NOTA: para comprender lo que aparece a continuación es necesario conocer el modelo de cajas, y las propiedades "width" y "height" de CSS.

Propiedades CSS invariables en los elementos "en linea". 

En los elementos "en linea" no es posible cambiar el valor de las siguientes propiedades CSS:

  • altura (width)
  • anchura (height)
Además, los elementos que puede haber alrededor, no se ven afectados por:
  • el margen superior e inferior: margin-top y margin-bottom.
  • el "padding" superior e inferior: padding-top y padding-bottom.
Ejemplo:

Comentarios

Publicar un comentario

Entradas populares de este blog

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más