El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Tamaño de Caja

Siguiente ►
►

El tamaño de caja en CSS es un concepto fundamental que afecta cómo se calculan las dimensiones de los elementos en una página web. La propiedad box-sizing permite controlar el modelo de caja utilizado para calcular el ancho y alto de los elementos.

¿Qué es el Modelo de Caja?

El modelo de caja en CSS describe cómo se calculan las dimensiones de un elemento y cómo se colocan en la página. Cada elemento se representa como una caja rectangular que consta de los siguientes componentes:

  1. Contenido: El área donde se muestra el contenido (texto, imágenes, etc.).
  2. Relleno (Padding): El espacio entre el contenido y el borde.
  3. Borde (Border): El borde alrededor del relleno.
  4. Margen (Margin): El espacio fuera del borde que separa el elemento de otros elementos.

Propiedad box-sizing

La propiedad box-sizing define cómo se calculan el ancho y el alto de un elemento. Tiene dos valores principales:

  1. content-box (valor por defecto): El ancho y el alto incluyen solo el contenido. El relleno y el borde se añaden fuera de estas dimensiones.
  2. border-box: El ancho y el alto incluyen el contenido, el relleno y el borde. Esto hace que el tamaño total del elemento sea más fácil de controlar.

Sintaxis

element {
  box-sizing: content-box; /* Valor por defecto */
}

element {
  box-sizing: border-box;
}

Ejemplo Práctico

Vamos a ver un ejemplo práctico para entender mejor cómo funciona box-sizing.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Box Sizing</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box content-box">Content Box</div>
  <div class="box border-box">Border Box</div>
</body>
</html>

CSS

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid #000;
  margin: 20px;
  background-color: #f0f0f0;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

Explicación del Ejemplo

  • Content Box: El ancho y el alto de la caja son 200px y 100px respectivamente, pero el relleno y el borde se añaden fuera de estas dimensiones. Por lo tanto, el tamaño total del elemento será:

    • Ancho total: 200px (contenido) + 40px (relleno) + 20px (borde) = 260px
    • Alto total: 100px (contenido) + 40px (relleno) + 20px (borde) = 160px

  • Border Box: El ancho y el alto de la caja incluyen el contenido, el relleno y el borde. Por lo tanto, el tamaño total del elemento será exactamente 200px de ancho y 100px de alto.

Comparación de content-box y border-box

Propiedad Ancho Total Alto Total
content-box 260px 160px
border-box 200px 100px

Ejercicio Práctico

Ejercicio

Crea dos cajas con las siguientes especificaciones:

  1. Caja 1:

    • Ancho: 300px
    • Alto: 150px
    • Relleno: 30px
    • Borde: 15px
    • box-sizing: content-box

  2. Caja 2:

    • Ancho: 300px
    • Alto: 150px
    • Relleno: 30px
    • Borde: 15px
    • box-sizing: border-box

Solución

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio de Box Sizing</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box caja1">Caja 1</div>
  <div class="box caja2">Caja 2</div>
</body>
</html>

CSS

.box {
  margin: 20px;
  background-color: #e0e0e0;
}

.caja1 {
  width: 300px;
  height: 150px;
  padding: 30px;
  border: 15px solid #000;
  box-sizing: content-box;
}

.caja2 {
  width: 300px;
  height: 150px;
  padding: 30px;
  border: 15px solid #000;
  box-sizing: border-box;
}

Retroalimentación

  • Error Común: Olvidar ajustar box-sizing puede resultar en elementos que no se alinean correctamente o que ocupan más espacio del esperado.
  • Consejo: Utiliza box-sizing: border-box para un control más preciso del tamaño total de los elementos, especialmente en diseños complejos.

Conclusión

La propiedad box-sizing es una herramienta poderosa para controlar cómo se calculan las dimensiones de los elementos en CSS. Al entender y utilizar box-sizing, puedes crear diseños más precisos y manejables. En el siguiente tema, exploraremos la propiedad display de CSS, que es crucial para controlar cómo se muestran los elementos en la página.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados