Modelo de Caja en CSS: Propiedades y Uso Práctico

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:12

Modelo de Caja en CSS: Propiedades y Uso Práctico

Curso de Frontend Developer

Clase 13 de 24

Clase 13 / 24

Recursos

El modelo de caja se compone de cuatro elementos: margin, border, padding y contenido.

Si entras a las herramientas de desarrollador de tu navegador y señalas un elemento HTML, en la sección de estilos te aparecerá una vista parecida a la anterior imagen, este es el modelo de caja del elemento señalado.

Qué es el contenido del elemento HTML

El contenido del elemento, como su nombre lo indica, es todo lo que está dentro del elemento. Este tiene medidas establecidas por las propiedades width y height, que representan la anchura y la altura, respectivamente. Si imaginamos una caja, este valor sería todo lo que decidas colocar dentro.

div {
    width: 100px;
    height: 100px;
}

Qué son los bordes del elemento HTML

El border consiste en el perfil o borde de un elemento HTML. Si imaginamos una caja, sería la caja en sí. Para definir un borde es necesario utilizar las siguientes tres propiedades:

border-color: establece el color del borde.
border-style: establece el estilo propio del borde, estos pueden ser: none (sin borde), dotted (puntos), dashed (guiones), solid (continuo), double (doble continuo), groove (recuadro).
border-width: estable la anchura del borde.

También se puede establecer los tres valores en una sola propiedad border donde no importa el orden.

div {
    border: [color] [style] [width];
}

div {
    border-color: red;
    border-style: solid;
    border-width: 1px;
}

Ejemplo de bordes

También estableciendo de manera individual los valores de cada posición:

div {
  border-top: 5px solid blue;
  border-bottom: 5px solid red;
  border-left: 5px solid black;
  border-right: 5px solid yellow;
}

Qué es el espaciado interno del elemento HTML o padding

El padding consiste en el espacio entre el borde y el contenido del elemento HTML. Si imaginamos una caja, este valor sería el espacio entre la caja y lo que deseas guardar.

div {
    padding: 100px;
}

Ejemplo de padding

Puedes establecer el padding en cada posición en una sola línea de las siguientes maneras:

padding: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.
padding: [arriba] [derecha e izquierda] [abajo] , siguiendo el eje principal.
padding: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.

También estableciendo de manera individual los valores de cada posición:

div {
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 10px;
}

Qué es el espaciado externo del elemento HTML o margin

El margin consiste en el espacio entre el borde y otro elemento HTML. Si imaginamos una caja, es el espacio entre tu caja y otra caja.

div {
    margin: 10px;
}

Ejemplo de margin

Puedes establecer el margin en cada posición en una sola línea de las siguientes maneras:

margin: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.
margin: [arriba] [abajo] [derecha e izquierda], siguiendo el eje principal.
margin: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.

También estableciendo de manera individual los valores de cada posición:

div {
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 20px;
    margin-right: 10px;
}

Qué son los valores por defecto

Por defecto, el navegador establece valores iniciales a algunas propiedades CSS, este es el caso de margin y padding. Una buena práctica es utilizar el selector universal para restablecer estos valores a 0, para que no surjan errores inesperados.

* {
    margin: 0;
    padding: 0;
}

Qué es el tamaño total del elemento

El tamaño total del elemento está determinado por la suma de los valores de las propiedades border padding y widtho height, dependiendo del eje. La propiedad margin no está incluida en este cálculo.

Por ejemplo, definimos los siguientes estilos:

div{
  width: 150px;
  height: 150px;
  padding: 20px;
  border: 10px solid gray;
  margin: 30px;
}

Ejemplo de medidas totales

El tamaño total del elemento será de 210px en ambos ejes, donde la suma fue: 150 (altura/anchura) + 20 x 2 (padding ambos lados) + 10 x 2 (borde ambos lados). Si evaluamos este elemento en las herramientas del desarrollador mostrará su tamaño como 210x210.

Aunque se conozca las medidas de los elementos de esta manera, no siempre existirá un control total. Por lo que podríamos establecer el tamaño total del elemento con width y height, y no solo del contenido, añadiendo la propiedad box-sizing.

Propiedad box-sizing

La propiedad box-sizing establece cómo se calculará el width y el height si incluyen bordes y espacios internos. Como buena práctica, se lo coloca en el selector universal, para que todos los elementos sigan esta tendencia.

* {
  box-sizing: border-box;
}

Con el valor border-box, el tamaño total del elemento será igual al especificado en el width y height, provocando que las medidas del contenido cambien con respecto a los bordes y espacios internos.

Por ejemplo, con los estilos que definimos anteriormente, establezcamos esta nueva propiedad.

Ejemplo de box-sizing

El tamaño total del elemento será de 150px en ambos ejes, donde se calcularon las medidas del contenido para que la suma total sea lo especificado en el width y height. Si evaluamos este elemento en las herramientas del desarrollador mostrará su tamaño total como 150x150 y el contenido como 90x90.

Conclusión, establece las medidas totales del elemento con width y height, junto con box-sizing: border-box, para que el contenido se adecue a las necesidades del contenedor.

¿Cuál es el problema con el tamaño de los bordes?

Recapitulando, el tamaño total de un elemento es la suma de tres: el borde, el espacio interior y el contenido.

Entonces, en algunas ocasiones tendrás la intención de añadir un borde al realizar un hover. Esto provocará que el elemento necesite más espacio del inicial, en un contenedor con más elementos puede ocasionar un conflicto.

Mira el siguiente ejemplo, e intenta poner el cursor sobre un elemento ¿qué sucede?

Ejemplo de problema con bordes

Observaste este comportamiento, debes tener cuidado con lo que agregas porque puedes provocar errores.

La solución a esto es colocar un borde de color transparent (transparente) y del mismo tamaño que el otro borde. Esto hará que el elemento se mantenga en su tamaño total, lo único que cambia es el color.

Solución al problema

Evita agregar un tamaño diferente al inicial.

Contribución creada por Andrés Guano (Platzi Contributor).

Axel Enrique Galeed Gutierrez

Hace 5 años

Les comparto mis apuntes del curso definitivo de HTML y CSS. Clase:

Modelo de caja

Estilos del modelo de caja

Margin

El estilo de margin puede ser un espacio externo de la caja hacia el exterior, es un espacio.

Es un espacio externo del elemento, es como decir la distancia que hay de tu cuerpo hasta tu pantalla o pared que tengas al frente.

Border

El borde puede estar o no.

Es la o las líneas que bordea un elemento por defecto viene transparente pero nosotros podemos agregarle color y un grosos.

Padding

Es distinto al margin, ya que el padding no es un espacio externo, sino que es un espacio interno, de la caja hacia adentro.

Nos ayuda a posicionar el contenido de la caja.

Contenido

Puede ser cualquier cosa que sea visible, ya sea un texto, imágenes, videos, etc.

Dentro de este también tenemos

Width

Es lo largo o ancho que va a generar que tiene la caja contenedora o el contenido.

Height

Es el alto que tiene o que queremos que tenga el contenido.

Con esto todo esto podemos jugar con las dimensiones de las etiquetas o del contenido de las mismas.

Position

También tenemos el position del contenido, que de acuerdo a este podemos jugar con sus posiciones top, right, borrom, left, se lo puede posicionar en cualquiera de estos.

Desglosando el modelo de caja

Si vemos más a profundidad el modelo de caja vemos que

Margin

Este viene por default es transparente, no se va a ver.

Color del fondo

Viene por default transparente, se lo puede cambiar si se desea.

Imagen de fondo

No viene una imagen de fondo, eso se rellena con el contenido como texto, imágenes, etc.

Relleno

Es el padding que es transparente.

Borde

Como lo dijimos este también es transparente, y si deseamos le podemos agregar un color y un ancho.

Contenido

Son las imágenes, videos, texto o cualquier cosa que podamos ver.

Padding

Podemos agregar padding de esta forma, donde el primer espacio corresponde al padding de arriba y abajo, el segundo espacio corresponde a los de la derecha e izquierda.

Con esto somos específico el tipo de padding queremos agregar.

También tenemos propiedades más específicas como ser top, bottom, left y right que solo agregan estilos en esas partes.

selector {
	padding: arriba-abajo derecha-izquierda;
	padding-top: valor;
}

main {
	padding: 20px 10px;
}

Buenas prácticas

Es una buena práctica resetear las propiedades que el navegador implementa por defecto, lo hacemos con el selector universal *.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

Box-sizing: border-box

Con esta propiedad y este valor podemos hace un cálculo automático para que el padding y border no se salgan de las dimensiones que queremos para nuestro elemento.

En palabras sencillas mete todo para adentro y realiza el cálculo hacia dentro en vez de sumar espacio al contenido hacia afuera. Lo que hace es restarlo, quitándole espacio al contenido, para que no tengamos problemas con las dimensiones.

Todo esto solo sucede con el padding y con el border, al margin no lo va a recalcular, el margin si crece hacia el exterior.

Axel Enrique Galeed Gutierrez

Hace 5 años

Me olvidé agregar algo al principio de mi aporte, se los dejo a continuación.

Los elementos que renderiza el navegador los renderiza como cajas que son contenedores que llevan un contenido.

A estas cajas le podemos agregar ciertos estilos, y estos estilos para modificarlas se lo llama modelo de caja.

Platzi Team

Hace 5 años

Excelente aporte, muchas gracias

Comentarios (125)125 comentarios

Carlos Eduardo Gomez García

José Henao C.

Ivan Daniel Cuevas

Alejandro de Jesús Escareño Flores

Reynaldo Fuentes Garcia

christian rojas

Thomas André Dale Guevara

Joel Dominguez Merino

Hernán Josué Hernández Lamprea

Miguel Ángel Ramón Candia

SAMUEL DAVID APONTE RAYO

Hace 4 años

Ricardo Alfonso Chavez Vilcapoma

Edixon javier Pabon Lizcano

Jesús Enrique Morocoima Marcano

Pedro Alvarado Garcia

Rafael Martínez Rodríguez

Santiago Parra Moreno

Jonathan Ismael Sánchez Mayorga

Luis angel osorio ochoa

Gabriela Ramírez

Kevin Isaac

Nohely Badillo

Emily García

Daniel Reymundo

Hace 3 años

Edwin Saenz Pisco

Paolo Joaquin Pinto Perez

Diego Fernando Arósquipa Rojas

Jeni Cartagena

Carlos Rodríguez

María Del Pilar Chávez Gutiérrez

Jesus Eduardo Sanchez Baños

Edwin Rodríguez

Lautaro Nicolas Alduino

Salomon Moreno

Diego Andrés Garzón Girón

Anggi Vanesa Pallares Solis

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer

Modelo de Caja en CSS: Propiedades y Uso Práctico

Progreso del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Recursos

Recursos