Modelo de cajas CSS. Ancho, altura, relleno, borde y margen

Modelo de cajas CSS. Ancho, altura, relleno, borde y margen

Print Friendly, PDF & Email
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
Valora esta entrada
Para entender el modelo de cajas de CSS lo más fácil es pensar un símil en el mundo real.

Por ejemplo una persona tiene una altura, se viste, ocupa una superficie … y le gusta que en un ascensor no le toquen.

En CSS se define un modelo de cajas que permite a las etiquetas html que se encuentran dentro del <body> tener también unas “propiedades físicas” similares.

De este modo en CSS definimos un ancho, una altura, un relleno, un borde, un margen…

El conjunto de todas estas propiedades traducidas a lenguaje de estilos es lo que conforma el modelo de cajas.

Se puede definir y “decorar” cualquier caja.

Veamos como ejemplo el modo como chrome representa por consola del navegador (Ctrl + inspeccionar) una caja de una página web.

Width, height

El width y el height hacen referencia a la altura y al ancho de una caja html.

width y height modelo de cajas
Diferencia de comportamiento de width y height en función de si es un elemento bloque (div) o un elemento en línea (a)

Como apuntes de clase considera los siguientes factores importantes:

  • Todos los navegadores tienen definido un width y un height por defecto para todas las etiquetas mientras no se indique en la hoja de estilos el valor de width o height.
  • Los elementos en línea no hacen caso del width ni el height que hayas podido indicar en la hoja de estilos. Para que lo hagan hay que transformarlos a elementos bloque o a elementos inline-block.
  • Los elementos bloque o inline-block si respetan lo que escribamos como width y/o height en una hoja de estilos css.
  • Se pueden definir mediante unidades relativas. En caso de usar un porcentaje (%) se toma como unidad absoluta la caja contenedora. Por ejemplo, una caja de ancho 100% ocupará todo el espacio disponible dentro de su contenedor. En última instancia este espacio es todo el ancho del documento web. (<body>).

Padding (relleno)

Si se tratara de una caja de zapatos el padding es la distancia entre los zapatos y las paredes de cartón.

  • Tenemos un padding superior (padding-top), derecho (padding-right), inferior (padding-bottom) e izquierdo (padding-left).
  • Existen distintas formas de escribir los paddings en una hoja de estilos. Se muestran en la imagen a continuación junto con sus equivalentes abreviados.
expresiones padding abreviadas
De izquierda a derecha como escribir el padding y sus expresiones equivalentes abreviadas

border (borde)

Siguiendo con el símil de la caja de zapatos, el border es el grosor que tienen las paredes de cartón.

  • Existe un borde superior, derecho, inferior y izquierdo.
  • Para un borde se puede definir el grosor (border-width), el color (border-color) y el trazado (border-style).
  • Personalmente no me gusta complicarme demasiado la vida con estos aspectos pero conviene conocerlos.
  • Para definir sus propiedades aplica exactamente la misma lógica que con el padding (sustituyendo la palabra padding por border y todo el resto igual).
Ejemplo de uso de borders en CSS
Ejemplo de uso de borders en CSS

Margin (separación)

Si estás en un ascensor puedes estar muy pegado o muy ancho. Esto es el margen.

Aplicado a una caja html es la distancia entre cajas desde el borde. Es decir, el espacio que queda entre cajas antes de tocarse.

Señalar como importantes los siguientes apuntes de clase:

  • Existe el margin superior, derecho, inferior e izquierdo.
  • Los elementos bloque si respetan todos los márgenes que hayamos podido indicar. Pero atención, los márgenes inferior y superior de dos cajas una encima de la otra se fusionan.
  • Los elementos en línea no respetan el margen superior ni inferior. Pero si el izquierdo y el derecho.
  • Existen distintas formas de escribir los margin en una hoja de estilos. Aplica exactamente la misma lógica que con el padding (sustituyendo la palabra padding por margin y todo el resto igual)

Background (fondo)

Debemos pensar en una caja como un objeto en 2 dimensiones con varias capas superpuestas.

El fondo es la última de las capas de una caja.

Podemos definir una imagen, un color, una posición dentro de la caja, si se repite o no, …

Dedicaremos una próxima publicación únicamente al background.

Outline (pseudo-border)

Outline es un tipo especial de borde que no afecta a las dimensiones de una ancha.

Es una propiedad meramente estética que no tiene grosor ni ancho.

Personalmente no la utilizo mucho.

Dar un vistazo a este enlace de w3schools.

Y hasta aquí una entrada extensa en la que hemos repasado muy resumidamente el concepto de modelo de cajas de CSS.

Para cada una de las propiedades podemos profundizar un poco viendo ejemplos. Ahora es cuestión de coger el sublime o el brackets y empezar a teclear y testear.

Espero que os pueda ser de utilidad el repaso.

¡Hasta mañana!

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Pseudo Clases :link, :active, :hover y :visited
- 109
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 60
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Introducción al CSS. Que significa Cascading Style Sheets.
- 207
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Menú horizontal con submenú desplegable horizontal mediante CSS
- 168
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 439
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Concepto de cascada en CSS
- 234
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Como mezclar CSS y HTML. Acoplamiento CSS
- 293
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 183
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.