• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

El modelo de cajas

Log in or subscribe for free to enjoy all this course has to offer!

Una página web puede ser vista como una sucesión y un conjunto de cajas llamadas «bloques». La mayoría de los elementos vistos en los capítulos anteriores son bloques: <header>, <article>, <nav>... Pero ya conocemos otros bloques: párrafos <p>, títulos <h1>, etc.

En neste capítulo, vamos a aprender cómo interactuar con estos bloques como si fuera cajas reales. Vamos a darles dimensiones, diseñarlos pero ajustando sus márgenes, y también aprenderemos cómo gestionar su contenido... ¡para evitar que el texto salga de estos bloques!

Estos son los conceptos básicos que necesitamos para diseñar nuestra página web... ¡Así que presta atención!

Bloquear y colocar entre líneas las etiquetas de tipo

En HTML, la mayoría de las etiquetas pueden colocarse en una o dos categorías:

  • etiquetas inline: este es el caso, por ejemplo, de los enlaces <a></a>.

  • etiquetas de bloque: este es el caso, por ejemplo, de los párrafos <p></p>.

¿Pero cómo indicas una etiqueta inline de una etiqueta de bloque?

En realidad es bastante fácil:

  • block: una etiqueta de bloque en tu página web automáticamente crea un salto de línea antes y después. Sólo tienes que imaginar un bloque. Tu página consistirá, de hecho, en una serie de bloques, uno después del otro. Pero, además, ¡verás que es posible poder un bloque dentro de otro, lo que aumentará significativamente nuestras habilidades de crear el diseño de nuestra página web!

  • inline: una etiqueta inline está necesariamente situada en una etiqueta de bloque. Una etiqueta inline no crea una vuelta de línea, así que e texto escrito dentro sigue desde el texto anterior en la misma línea (por eso se conoce como etiqueta «inline»).

Para poder visualizar el concepto correctamente, he creado un pequeño diagrama en la siguiente figura.

Diferencia entre una etiqueta inline y otra de bloque
Diferencia entre una etiqueta inline y otra de bloque

  • Las etiquetas de bloque se muestran con fondo azul.

  • Las etiquetas inline se muestran con fondo amarillo.

Como puedes ver, los bloques están debajo uno de otro. Puedes ser anidados unos con otros (recuerda nuestra <section> de bloques contiene bloques <aside>, por ejemplo).
La etiquete inline <a></a> está situada en una etiqueta de bloque y el texto está insertado en la misma línea.

Unos pocos ejemplos

Para ayudarte a entender qué etiquetas son inline y cuáles son de bloque, aquí hay una tabla con algunas etiquetas habituales.

Etiquetas de bloque

Etiquetas de inline

<p>

<em>

<footer>

<strong>

<h1>

<mark>

<h2>

<a>

<article>

<img />

...

...

Esta table no es toda inclusiva, al contrario. Si quieres una lista completa de todas las etiquetas que existen y si ellas son inline o de bloque, mira el anexo que te da una lista de todas las etiquetas HTML.

Etiquetas para objetivos generales

Ya las conoces porque te hablé de ellas hace varios capítulos. Estas son etiquetas que no tienen un significado en particular (a diferencia de <p> que significa «párrafo», <strong> que significa «importante», etc.).
La principal ventaja de estas etiquetas es que una clase (o un id) puede aplicarse al CSS cuando no hay otra etiqueta adecuada.

Hay dos etiquetas genéricas y, coincidentemente, la única diferencia entre las dos es que una es inline y la otra en bloque:

  • <span></span> ( inline) ;

  • <span></span> ( bloque) ;

Adherir a la semántica

Aunque el objetivo general de las etiquetas es práctico, en algunos casos, ten cuidado de no exagerarlas. Ten en cuenta: muchos desarrolladores web usan muchas etiquetas <div> y <span>  y se olvidan que que hay otras etiquetas más adecuadas.

Aquí tienes un par de ejemplos:

  • Ejemplo de un apso innecesario: <span class=»importante»>. Nunca debería ver esto en uno de tus códigos ya que la etiqueta <strong> está ahí para indicar importancia.

  • Ejemplo de un div innecesario: <div class=»título»>. Es completamente absurdo, ya que hay etiquetas especialmente diseñadas para títulos ( <h1>, <h2>, etc.).

Sí, dirás que al final el efecto visual es el mismo. Estoy de acuerdo. Pero las etiquetas genéricas no añaden significado a la página y no son comprendidas por el ordenador. Siempre usa otras etiquetas, más adecuadas, cuando sea posible. ¡El propio Google recomienda esto para ayudarte a mejorar la posición de tus páginas en los resultados de búsqueda!

Dimensiones

Aquí vamos a trabajar solamente con etiquetas de tipo bloque.

Para empezar, miremos el tamaño de los bloques. Al contrario que una etiqueta inline, un bloque tiene dimensiones específicas. Tiene anchura y altura. Así que tenemos dos propiedades CSS:

  • width: es la anchura del bloque. Para especificarse en píxeles (px) o como porcentaje (%).

  • height: es la altura del bloque. Que, de nuevo, se especifica en píxeles (px) o en porcentaje (%).

Por defecto, un bloque coge el 100 % de la anchura disponible. Esto se puede comprobar aplicando bordes o un color de fondo a nuestros bloques (figura siguiente).

Los bloques cogen toda la anchura disponible
Los bloques cogen toda la anchura disponible

Ahora añadamos un poco de CSS para cambiar la anchura de los párrafos. El código CSS siguiente dice: «Quiero que todos mis párrafos tengan una anchura del 50 %»

p
{
    width: 50 %;
}

El resultado se muestra en la siguiente figura.

Un párrafo con una anchura del 50 %
Un párrafo con una anchura del 50 %

Los porcentajes serán útiles para crear un diseño que automáticamente se adapte a la resolución de pantalla del visitante.
Sin embargo, podrían necesitar crear bloques con un tamaño específico en píxeles.

p
{
   width: 250px;
}

Mínimo y máximo

Puedes especificar las dimensiones máximas y mínimas de un bloque. Esto es muy útil ya que nos permite definir dimensiones «límite» para permitirle a nuestra página adaptarse a las diferentes resoluciones de las pantallas de los visitantes.

  • min-width: anchura mínima;

  • min-height: altura mínima;

  • max-width: anchura máxima;

  • max-height: altura máxima.

Por ejemplo, puedes especificar que los párrafos deben ocupar en 50 % del ancho y tener al menos 400 píxeles de ancho en todos los casos.

p
{
    width: 50 %;
    min-width: 400px;
}

Ve el resultado cambiando la anchura de la ventana de tu navegador. Verás que, si es muy pequeño, el párrafo se ve forzado a tener una anchura de al menos 400 píxeles.

Márgenes

Deberías saber que todos los bloques tienen márgenes. Hay dos tipos de márgenes:

  • márgenes interiores

  • márgenes exteriores

Echa un vistazo en el diagrama en la figura siguiente.

Márgenes interiores y exteriores
Márgenes interiores y exteriores

He colocado un borde alrededor de este bloque para ver mejor dónde acaba.

  • El espacio entre el texto y el borde es el margen interior (mostrado en verde).

  • El espacio entre el borde y el siguiente bloque es el margen exterior (mostrado en rojo).

En CSS, puedes cambiar el tamaño de los márgenes con las dos siguientes propiedades:

  • padding: indica el tamaño del margen interior. Está generalmente especificado en píxeles (px).

  • margin: indica el tamaño del margen exterior. Ahí también, los píxeles se usan más frecuentemente.

Para ver los márgenes con claridad, cojamos dos párrafos y simplemente apliquémosles un pequeño borde (figura siguiente):

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
}
Márgenes por defecto para los párrafos
Márgenes por defecto para los párrafos

Como puedes ver, por defecto no hay margen interior ( padding). Sin embargo, hay un margen exterior ( margin). Es debido a este margen por lo que dos párrafos no están pegados y parecen estar separados por una «línea de separación».

Supongamos que quiero añadir un margen interno de 12 px a los párrafos (figura siguiente):

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
    padding: 12px; /* Margen interior de 12px */
}
Un margen interior añadido a los párrafos
Un margen interior añadido a los párrafos

Ahora quiero que mis párrafos estén más separados. Añado la propiedad margin para especificar un margen de 50 px entre dos párrafos (siguiente figura):

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Margen Exterior de 50px */
}

En efecto, margin (como padding) se aplica a los cuatro lados del bloque.
Si quieres especificar un margen superior, inferior, izquierdo y derecho diferente, tienes que usar unas propiedades más específicas... El principio es el mismo que para la propiedad border, como verás.

arriba, derecha, izquierda, abajo...

Tienes que recordar los siguientes términos:

  • top;

  • bottom;

  • left;

  • right;

Para que puedas mantener todas las propiedades en tu cabeza.
Igual, te haré una lista de propiedades para margin y padding para que entiendas el principo.

Aquí está la lista para margen:

  • margin-top: margen exterior en la parte superior;

  • margin-bottom: margen exterior en la parte inferior;

  • margin-left: margen exterior en la izquierda;

  • margin-right: margen exterior en la derecha.

Y la lista para relleno:

  • padding-top: margen interior en la parte superior;

  • padding-bottom: margen interior en la parte inferior;

  • padding-left: margen interior en la izquierda;

  • padding-right: margen interior en la derecha.

Centrar bloques

Los bloques pueden centrarse perfectamente. Y un diseño centrado es cómodo cuando no tienes la resolución del visitante.

Hay que seguir las siguientes reglas para centrar:

  • dale una anchura al bloque (con la propiedad width);

  • especifica que quieres unos márgenes exteriores automáticos así: margin: auto;.

Intentemos esta técnica en nuestros pequeños párrafos (líneas 3 y 4):

p
{
    width: 350px; /* Especificamos una anchura (obligatorio) */
    margin: auto; /* Podemos pedir que el bloque se centre con el auto */
    border: 1px solid black;
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
}

Y en la siguiente figura, el resultado.

¡Así el navegador centra automáticamente nuestros párrafos!

Cuando las cosas se desbordan...

Cuando empezamos a definir las dimensiones exactas para nuestros bloques, como hemos hecho, podrían a veces parecer muy pequeños para el texto que contienen.

Las propiedades CSS que vamos a ver aquí han sido creadas precisamente para examinar el overflow... y decidir qué hacer si esto ocurre.

overflow: cortar un bloque

Supongamos que tienes un párrafo largo y quieres (por cualquier razón) que sea 250 px de ancho y 110 px de alto Añadámosle un borde y rellenémoslo con texto... hasta el borde (figura siguiente).

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
}
El texto va más allá del bloque del párrafo
El texto va más allá del bloque del párrafo

¡Oh, no! ¡El texto va más allá de los límites del párrafo!

¡En efecto! Preguntaste las dimensiones exactas, ¡las conseguiste! Pero... el texto no encaja en ese bloque tan pequeño.

Si quieres que el texto quede dentro de los límites del párrafo, tendrás que usar la propiedad overflow. Estos son los valores que puede llevar:

  • visible (valor por defecto): si el texto excede los límites del tamaño, permanece visible y deliberadamente va más allá de los límites del bloque.

  • hidden: si el texto excede los límites, simplemente se cortará. No seremos capaces de ver todo el texto.

  • scroll: de nuevo, el texto será cortado si excede los límites. Excepto esta vez, el navegador creará barras de desplazamiento para que podamos leer el texto completo. Es como un marco dentro de la página.

  • auto: es el modo «autopiloto». Básicamente, es el navegador el que decide si mostrar o no las barras de desplazamiento (sólo lo hará si es necesario). Este es el valor que recomiendo que uses más a menudo.

Mediante overflow: hidden; el texto queda cortado (no se puede ver qué hay debajo), como en la siguiente ilustración.

El texto queda cortado en los límites del párrafo
El texto queda cortado en los límites del párrafo

Probemos ahora overflow: auto; con el código CSS mostrado a continuación (el resultado se puede comprobar en la siguiente imagen):

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
}

¡Eureka! Las barras de desplazamiento nos permiten ahora ver el contenido que no era visible.

word-wrap: cortar textos demasiado grandes

Si necesitas colocar una palabra muy larga en un bloque y no cabe por ser demasiado ancha, te encantará word-wrap. Esta propiedad se utiliza para forzar la partición con guión de palabras muy largas (normalmente, direcciones bastante largas).

La siguiente ilustración muestra el posible resultado de introducir una URL bastante larga en un bloque.

El texto excede el ancho disponible
El texto excede el ancho disponible

El ordenador no puede «cortar» la dirección ya que no hay espacio o guión, y no sabe cómo dividirla con un guión.

Con el siguiente código, se forzará una división con guiones cuando el texto sea susceptible de exceder los límites (siguiente ilustración).

p
{
    word-wrap: break-word;
}
El texto se corta para que no exceda el espacio
El texto se corta para que no exceda el espacio

En resumen

  • Hay dos tipos principales de etiquetas en HTML:

    • Etiquetas de bloque (<p>, <h1>…): estas etiquetas crean un salto de línea por defecto y ocupan todo el ancho disponible.. Se suceden de arriba a abajo.

    • Etiquetas en línea (<a>, <strong>…): estas etiquetas definen el texto en medio de una línea. Se suceden de izquierda a derecha.

  • Puedes cambiar el tamaño de una etiqueta de bloque mediante las propiedades CSS width y height.

  • Puedes establecer el mínimo y máximo permitido para el ancho y el alto: min-width, max-width, min-height, max-height.

  • Los elementos de página tiene márgenes internos (padding) y márgenes externos (margin).

  • Si hay demasiado texto dentro de un bloque de dimensiones fijas, el texto podría exceder los límites. En este caso, una buena opción sería añadir barras de desplazamiento mediante la propiedad overflow o utilizar la división con guiones mediante word-wrap.

Example of certificate of achievement
Example of certificate of achievement