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:

Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 20
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Como mezclar CSS y HTML. Acoplamiento CSS
- 158
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Concepto de herencia en CSS
- 161
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Ejemplo de centrado vertical y horizontal con CSS
- 51
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 44
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
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.