Tutorial CSS: Modelo de caja

Componentes del modelo de caja

En CSS, el modelo de caja es fundamental para comprender cómo se renderizan los elementos en una página web. Cada elemento en un documento HTML genera una "caja" que consiste en varios componentes clave:

Contenido (content): Esta es la parte más interna de la caja y contiene el contenido real, como texto o imágenes. El tamaño de esta área puede ser definido mediante las propiedades width y height.

Relleno (padding): El área entre el contenido y el borde (border) de la caja. El relleno se añade al tamaño del contenido y puede ser definido individualmente para cada lado de la caja (top, right, bottom, left) mediante las propiedades padding-top, padding-right, padding-bottom y padding-left, o de manera unificada con la propiedad padding.

Borde (border): La línea que rodea el relleno. El borde tiene múltiples propiedades que configuran su ancho (border-width), su estilo (border-style) y su color (border-color). Como en el caso del relleno, estas propiedades pueden ser especificadas individualmente o unificadamente mediante la propiedad border.

Margen (margin): El espacio exterior que separa la caja de otros elementos en la página. El margen también puede ser configurado individualmente por cada lado de la caja (margin-top, margin-right, margin-bottom, margin-left) o de manera unificada con la propiedad margin.

Ejemplo de declaración

.elemento {
  width: 200px;           /* Ancho del contenido */
  height: 100px;          /* Alto del contenido */
  padding: 10px;          /* Relleno de 10px en todos los lados */
  border: 2px solid #000; /* Borde de 2px de ancho, estilo sólido, color negro */
  margin: 20px;           /* Margen de 20px en todos los lados */
}

En este ejemplo:

• El width y height definen el tamaño del contenido.
• El padding añade 10px alrededor del contenido en todos los lados.
• El border especifica un borde de 2px que es sólido y negro.
• El margin añade 20px de espacio libre fuera del borde.

Tamaño total de la caja

Cuando el navegador renderiza este elemento, el tamaño total de la caja representada es igual al tamaño del contenido. En este caso particular:

Ancho total: content width 200px

Alto total: content height 100px

Box-sizing y el modelo de caja

El valor por defecto de box-sizing es content-box, lo que significa que width y height excluyen padding y border. Sin embargo, si se establece box-sizing: border-box;, entonces width y height incluirán padding y border dentro del tamaño total del elemento, lo que puede simplificar el control del layout y el ajuste del diseño.

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

Con box-sizing: border-box;, las propiedades width y height representarán el tamaño total de la caja, incluidos padding y border, lo que en este caso significa que el contenido será menos ancho y alto para encajar dentro del tamaño total definido.

Visualización gráfica

+-----------------------------+
|            margin           |
|  +-----------------------+  |
|  |         border        |  |
|  |   +---------------+   |  |
|  |   |    padding    |   |  |
|  |   |  +---------+  |   |  |
|  |   |  | content |  |   |  |
|  |   |  +---------+  |   |  |
|  |   +---------------+   |  |
|  +-----------------------+  |
+-----------------------------+

En el contexto del modelo de caja en CSS, entender la visualización gráfica de cómo se representan los diferentes componentes de una caja es esencial. Cada caja se compone de contenido, relleno, borde y margen, cada uno de los cuales puede variar en tamaño y estilos.

Visualización básica del modelo de caja

Considéralo como una serie de capas que se apilan desde el interior hacia el exterior:

1. Contenido (content): Esta es la parte más interna, donde se encuentra el texto o las imágenes.
2. Relleno (padding): Rodea el contenido y proporciona espacio entre el contenido y el borde.
3. Borde (border): Rodea el relleno y encierra la caja.
4. Margen (margin): Rodea el borde y proporciona espacio entre la caja y otras cajas.

Cada uno de estos componentes puede ser visualizado y modificado utilizando diferentes propiedades CSS. A continuación, se presenta un ejemplo práctico de cómo se muestra y ajusta la representación gráfica de estos componentes en un elemento HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualización del Modelo de Caja</title>
    <style>
        .caja {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #3498db;
            margin: 15px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="caja">Contenido de la caja</div>
</body>
</html>

En este ejemplo:

• Ancho del contenido: Es de 200px y su alto de 100px.
• Relleno: 20px en todos los lados, lo que da un espacio adicional alrededor del contenido.
• Borde: 5px de ancho, sólido y de color azul (#3498db).
• Margen: 15px alrededor del borde, separando la caja de otros elementos circundantes.

Cuando se renderice en un navegador, el contenido será visible como la parte más interna, rodeado por el relleno, el borde y finalmente el margen, creando una estructura bien definida. Esto permite un mejor control del espacio y la alineación de los elementos en el diseño de la web.

Diagramas para aclaración

Para una mejor visualización, es posible usar diagramas que ilustran cómo estos distintos componentes se apilan uno sobre otro. Por ejemplo, aplicaciones como las herramientas de desarrollo de Google Chrome permiten inspeccionar y visualizar gráficamente el modelo de caja de cualquier elemento en una página web, mostrando claramente cada nivel: contenido, relleno, borde y margen.

El conocimiento visual de estos componentes es crucial para el ajuste fino del layout y el diseño de una página web, ya que permite ver de manera intuitiva cómo interactúan entre sí los diferentes elementos CSS. Esta visualización gráfica ayuda enormemente a identificar problemas de diseño, alinear elementos adecuadamente y optimizar el espacio en las interfaces web.

Ejemplo de código HTML y CSS

En esta sección, se ilustrará cómo aplicar el modelo de caja en un ejemplo práctico utilizando HTML y CSS. Crearemos una caja con contenido, relleno, borde y márgenes definidos, y veremos cómo se representa visualmente en una página web.

HTML

Primero, definamos la estructura HTML básica con un div que representará nuestra caja. En este caso, utilizaremos una clase llamada box.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de Caja en CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">Contenido de la caja</div>
</body>
</html>

CSS

Ahora, definamos el CSS en un archivo separado (styles.css). Aplicaremos varias propiedades CSS para mostrar cómo el contenido (content), relleno (padding), borde (border) y margen (margin) afectan a nuestra caja.

.box {
    width: 300px;                  /* Ancho del contenido */
    height: 150px;                 /* Alto del contenido */
    padding: 20px;                 /* Relleno de 20px en todos los lados */
    border: 10px solid #3498db;    /* Borde de 10px de ancho, estilo sólido, color azul */
    margin: 30px;                  /* Margen de 30px en todos los lados */
    background-color: #f8f9fa;     /* Color de fondo */
    box-sizing: border-box;        /* Incluye relleno y borde en el ancho y alto totales */
}

Explicación

1. Ancho y alto del contenido: La caja tiene un ancho de 300px y un alto de 150px.
2. Relleno (padding): Se añade 20px de espacio alrededor del contenido en todos los lados.
3. Borde (border): Aplicamos un borde de 10px de ancho, sólido y de color azul (#3498db).
4. Margen (margin): Añadimos 30px de margen alrededor de la caja, separándola de otros elementos adyacentes.
5. Color de fondo (background-color): Establecemos un color de fondo claro (#f8f9fa) para distinguir la caja.
6. Box-sizing: border-box: Utilizamos border-box para incluir el relleno y borde en el ancho y alto totales.

Resultado

Cuando este código es renderizado en un navegador, la caja se mostrará con las dimensiones y estilos especificados. box-sizing: border-box asegura que las dimensiones totales de la caja incluyan el relleno y el borde, haciendo que el control de layout sea más sencillo y predecible. Esto es útil para evitar cálculos manuales y garantizar que los elementos se ajusten adecuadamente dentro de un diseño más complejo.

Cálculo del tamaño total

Para calcular el tamaño total de una caja en CSS, podemos desglosar los componentes individuales que lo componen: contenido, relleno, borde y margen. El tamaño total de la caja se calcula sumando estos componentes tanto en el eje horizontal (ancho) como en el eje vertical (alto).

Fórmulas básicas

Para el cálculo sin box-sizing: border-box, las fórmulas son las siguientes:

• Ancho total:

content width + padding-left + padding-right + border-left + border-right

• Alto total:

content height + padding-top + padding-bottom + border-top + border-bottom

Ejemplo práctico

Tomemos un ejemplo CSS:

.elemento {
  width: 200px;           /* Ancho del contenido */
  height: 100px;          /* Alto del contenido */
  padding: 10px;          /* Relleno de 10px en todos los lados */
  border: 3px solid #000; /* Borde de 3px de ancho, estilo sólido, color negro */
  margin: 15px;           /* Margen de 15px en todos los lados */
}

Cálculo del ancho total

• content width: 200px
• padding-left + padding-right: 10px + 10px = 20px
• border-left + border-right: 3px + 3px = 6px
• margin-left + margin-right: 15px + 15px = 30px

Ancho total:

200px + 20px + 6px + 30px = 256px

Cálculo del alto total

• content height: 100px
• padding-top + padding-bottom: 10px + 10px = 20px
• border-top + border-bottom: 3px + 3px = 6px
• margin-top + margin-bottom: 15px + 15px = 30px

Alto total:

100px + 20px + 6px + 30px = 156px

Por tanto, el tamaño total de esta caja es de 256px de ancho y 156px de alto.

Con box-sizing: border-box

Cuando se utiliza box-sizing: border-box, el borde y el relleno se incluyen dentro del ancho y alto especificados. Esto simplifica el cálculo del tamaño total ya que width y height representan el tamaño total de la caja, y solo los márgenes necesitan sumarse.

Modificamos el ejemplo anterior con box-sizing: border-box:

.elemento {
  box-sizing: border-box;
  width: 200px;           /* Ancho total, incluido borde y relleno */
  height: 100px;          /* Alto total, incluido borde y relleno */
  padding: 10px;          /* Relleno de 10px en todos los lados */
  border: 3px solid #000; /* Borde de 3px de ancho, estilo sólido, color negro */
  margin: 15px;           /* Margen de 15px en todos los lados */
}

Cálculo del ancho total

• content width + padding-left + padding-right + border-left + border-right: incluido en width
• width: 200px
• margin-left + margin-right: 15px + 15px = 30px

Ancho total:

200px + 30px = 230px

Cálculo del alto total

• content height + padding-top + padding-bottom + border-top + border-bottom: incluido en height
• height: 100px
• margin-top + margin-bottom: 15px + 15px = 30px

Alto total:

100px + 30px = 130px

Con box-sizing: border-box, la escritura de CSS y el cálculo del tamaño total de la caja son más predecibles y manejables, especialmente en diseños complejos.

Colapso de márgenes

El colapso de márgenes en CSS es un fenómeno que ocurre cuando los márgenes verticales de los elementos adyacentes se "colapsan" en lugar de sumarse. Este comportamiento puede resultar confuso, pero es esencial comprenderlo para diseñar layouts correctamente y evitar problemas de espaciado inesperado.

Condiciones para el colapso de márgenes

Márgenes adyacentes de elementos hermanados: Cuando dos elementos bloque están uno encima del otro en el flujo normal del documento, el margen inferior del primer elemento y el margen superior del segundo elemento se colapsan. El margen resultante será el del mayor de los dos.

<div class="elemento1"></div>
<div class="elemento2"></div>

.elemento1 {
    margin-bottom: 20px;
    height: 50px;
    background-color: lightblue;
}
.elemento2 {
    margin-top: 30px;
    height: 50px;
    background-color: lightgreen;
}

Resulta en un margen entre los dos elementos de 30px (el mayor de los dos).

Márgenes de elementos anidados sin bordes, rellenos ni contenido: Si tienes elementos anidados y el elemento padre no contiene ningún borde, relleno ni contenido, los márgenes exteriores de los elementos hijos se colapsan con los márgenes del padre.

<div class="padre">
    <div class="hijo"></div>
</div>

.padre {
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: lightcoral;
}
.hijo {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 50px;
    background-color: lightyellow;
}

Aquí, los márgenes margin-top y margin-bottom de .hijo colapsan con los márgenes de .padre, resultando en un margen total de 30px en lugar de 50px.

Elementos vacíos: Si un elemento no tiene contenido, relleno, borde ni altura (solamente márgenes), sus márgenes se colapsarán con los márgenes de los elementos adyacentes.

<div class="elemento3"></div>
<div class="elemento4"></div>

.elemento3 {
    margin-bottom: 40px;
    background-color: lightpink;
}
.elemento4 {
    margin-top: 0px; /* Esto se añadirá solo si existe algún contenido */
    background-color: lightgray;
}

Si .elemento4 no tiene contenido y solo define márgenes sin ninguna otra propiedad que evite el colapso, resultará en un margen de 40px en lugar de sumarse.

Previniendo el colapso de márgenes

Usando bordes o relleno: Añade un borde o relleno al elemento contenedor para evitar que los márgenes colapsen.

.padre {
    padding-top: 1px; /* Añadir relleno */
}
.padre {
    border-top: 1px solid transparent; /* Añadir un borde */
}

Utilizando display con inline-block o flex: Elementos con display: inline-block, flex, grid no colapsan márgenes de la misma manera.

.elemento1 {
    display: inline-block;
}

Utilizando flotantes o posicionamiento absoluto: Elementos posicionados absolutamene (position: absolute) o flotantes (float: left/right/none) no participan en el colapso de márgenes.

.elemento {
    position: absolute;
}

Consideraciones adicionales

El colapso de márgenes solo ocurre en la dirección vertical (márgenes superior e inferior). Los márgenes horizontales (izquierda y derecha) no colapsan en el flujo normal del documento.

El colapso de márgenes puede afectar considerablemente el diseño de una página web, especialmente en layouts más complejos con múltiples elementos anidados y espaciados. Comprender este comportamiento es crucial para evitar sorpresas y asegurar que el espaciado entre elementos se comporte como se espera. Es recomendable utilizar herramientas de desarrollo en navegadores para inspeccionar y ajustar márgenes y otros parámetros de diseño para obtener el resultado deseado.

box-sizing

box-sizing es una propiedad CSS crucial para controlar el modelo de caja de los elementos. Por defecto, CSS utiliza el modelo de caja estándar (content-box), donde las propiedades width y height se aplican solo al área de contenido de un elemento y no incluyen el relleno ni el borde. Sin embargo, este comportamiento puede ser modificado con box-sizing.

Valores de box-sizing

content-box: Es el valor por defecto. Las propiedades width y height se aplican solo al contenido del elemento, excluyendo padding y border. Esto significa que para calcular el tamaño total de la caja, se debe añadir explícitamente padding y border.

border-box: Incluye padding y border dentro de las propiedades width y height. Esto simplifica el control de layout, ya que el tamaño total del elemento se define por width y height, sin necesidad de cálculos adicionales.

Ejemplo de uso

/* Ejemplo sin box-sizing especificado: content-box por defecto */
.sin-box-sizing {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #3498db;
  background-color: #f8f9fa;
}

/* Ejemplo con box-sizing: border-box */
.con-box-sizing {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #3498db;
  background-color: #f8f9fa;
}

Análisis de los ejemplos

• Sin box-sizing especificado (content-box):

.sin-box-sizing {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}

Aquí, las propiedades width y height se aplican solo al área de contenido del elemento.

• Ancho total: width

300px

• Alto total: height

150px

• Con box-sizing: border-box:

.con-box-sizing {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}

Aquí, tanto padding como border se incluyen dentro de las propiedades width y height.

• Ancho total: Específicamente definido como 300px
• Alto total: Específicamente definido como 150px

Aplicaciones prácticas

Utilizar box-sizing: border-box es particularmente útil cuando se trabaja en layouts responsivos y diseños con tamaños estrictamente definidos. Al incluir padding y border dentro de las dimensiones del elemento, se elimina la necesidad de realizar cálculos adicionales y se asegura que los elementos no desbordarán su contenedor debido a ajustes inesperados en padding o border.

Una buena práctica en el diseño de layouts modernos es aplicar box-sizing: border-box globalmente:

/* Aplicar box-sizing: border-box globalmente */
*, *::before, *::after {
  box-sizing: border-box;
}

Este enfoque asegura que todos los elementos, incluidos los pseudo-elementos, usen el modelo de caja border-box, proporcionando una base consistente y predecible para la construcción de layouts.

Compatibilidad

box-sizing es ampliamente compatible con todos los navegadores modernos, incluidas las versiones recientes de Chrome, Firefox, Safari, Edge y Opera. Sin embargo, es importante tener en cuenta las versiones más antiguas de algunos navegadores y utilizar prefijos cuando sea necesario para asegurar la compatibilidad.

/* Compatibilidad con versiones antiguas */
.elemento {
  -webkit-box-sizing: border-box; /* Safari (WebKit) */
  -moz-box-sizing: border-box;    /* Firefox (Gecko) */
  box-sizing: border-box;
}

Implementar box-sizing de manera efectiva permite un control más preciso sobre las dimensiones de los elementos y evita problemas comunes relacionados con el cálculo de tamaños en diseños complejos.

margin auto

En CSS, la propiedad margin: auto es una herramienta poderosa para centrar elementos dentro de un contenedor. Esto se aplica a elementos de bloque (block-level) y funciona estableciendo automáticamente la cantidad de margen necesario en los lados opuestos para centrar el elemento.

Uso de margin: auto

Para centrar horizontalmente un elemento, se debe configurar la propiedad de ancho (width) del elemento y aplicar margin: auto. Por ejemplo:

.centrado {
  width: 50%;       /* Establece un ancho específico */
  margin: auto;     /* Centra el elemento horizontalmente */
}

En este ejemplo, el elemento con la clase .centrado tendrá un ancho del 50% del contenedor y se centrará horizontalmente dentro de ese contenedor.

Flexbox y margin: auto

Flexbox mejora aún más el uso de margin: auto. Al configuar un contenedor flexible (display: flex;) y aplicar margin: auto a un elemento dentro de ese contenedor, podemos centrar el elemento tanto horizontalmente como verticalmente.

.contenedor-flex {
  display: flex;
  justify-content: center;  /* Centra los elementos horizontalmente */
  align-items: center;      /* Centra los elementos verticalmente */
  height: 100vh;            /* Altura del contenedor */
}

.elemento-flex {
  margin: auto;             /* Aplica margen automatico */
}

Ejemplo de centrado horizontal y vertical

Veamos un ejemplo completo que muestra el uso de margin: auto para centrar un div dentro de un contenedor tanto horizontal como verticalmente.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin Auto</title>
    <style>
        .contenedor {
            width: 80%;
            height: 300px;
            border: 1px solid #000;
            display: flex;             /* Utiliza Flexbox */
            justify-content: center;    /* Centra horizontalmente */
            align-items: center;        /* Centra verticalmente */
        }
        
        .elemento {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: auto;               /* Centro dentro del contenedor Flex */
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <div class="elemento">Centrado</div>
    </div>
</body>
</html>

En este ejemplo, el contenedor utiliza Flexbox para centrar el elemento hijo. La propiedad margin: auto en el .elemento asegura que se mantenga centrado horizontal y verticalmente.

Consideraciones adicionales

1. Ancho especificado (width): La propiedad margin: auto funciona correctamente cuando se especifica un ancho (width). Si el ancho no está especificado, el elemento ocupará todo el espacio disponible y los márgenes automáticos no tendrán efecto.
2. Compatibilidad: La propiedad margin: auto es ampliamente compatible con todos los navegadores modernos. No se requieren prefijos o hacks para asegurar su funcionamiento en la mayoría de los casos.
3. Elementos inline-block y grid: Aunque margin: auto es más comúnmente usado con elementos de bloque y contenedores flexibles, también puede ser utilizado dentro de elementos inline-block y layouts de grilla (CSS hrid), cuando se desea ajustar el posicionamiento automático.

Ejemplo con CSS grid

.contenedor-grid {
  display: grid;
  place-items: center;  /* Centra los elementos dentro de Grid */
  height: 100vh;
}

.elemento-grid {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  margin: auto;         /* Centro dentro del contenedor Grid */
}

<div class="contenedor-grid">
    <div class="elemento-grid">Grid centrado</div>
</div>

En este último ejemplo, place-items: center asegura que todos los elementos dentro del contenedor Grid sean centrados horizontal y verticalmente, mientras que margin: auto en el .elemento-grid garantiza que se mantenga centrado incluso si el tamaño del contenedor cambia.

overflow

La propiedad overflow en CSS controla lo que sucede con el contenido que desborda el cuadro (o caja) de un elemento. Es esencial para diseñadores e desarrolladores que trabajan en layouts complejos, donde el contenido puede exceder las dimensiones del contenedor establecido.

Valores de la propiedad overflow

visible: Es el valor por defecto. El contenido que desborda no se recorta y es visible fuera del contenedor. Esto puede causar problemas de diseño si el contenido no se maneja apropiadamente.

hidden: El contenido que excede las dimensiones del contenedor se recorta y no se muestra. No se generan barras de desplazamiento.

.contenido-hidden {
    width: 200px;
    height: 100px;
    overflow: hidden;
    background-color: lightgray;
}

• scroll: Siempre muestra barras de desplazamiento, independientemente de si el contenido desborda o no. Esto asegura que el usuario pueda desplazarse para ver el contenido completo.

.contenido-scroll {
    width: 200px;
    height: 100px;
    overflow: scroll;
    background-color: lightblue;
}

• auto: Muestra barras de desplazamiento solo cuando el contenido desborda el contenedor. Este es el valor más comúnmente utilizado, ya que maneja de manera eficiente el contenido dinámico.

.contenido-auto {
    width: 200px;
    height: 100px;
    overflow: auto;
    background-color: lightgreen;
}

Ejemplos de uso

Ejemplo con overflow visible

<div class="contenido-visible">
    <p>Contenido con overflow visible</p>
</div>

<style>
    .contenido-visible {
        width: 100px;
        height: 50px;
        overflow: visible;
        background-color: lightcoral;
    }
</style>

En este caso, el contenido del párrafo continuará siendo visible fuera de los bordes del contenedor si excede el tamaño especificado.

Ejemplo con overflow hidden

<div class="contenido-hidden">
    <p>Contenido con overflow hidden. Este contenido es demasiado largo y se recortará.</p>
</div>

<style>
    .contenido-hidden {
        width: 100px;
        height: 50px;
        overflow: hidden;
        background-color: lightgray;
    }
</style>

Aquí, cualquier contenido que exceda las dimensiones del contenedor será recortado y no será visible.

Ejemplo con overflow scroll

<div class="contenido-scroll">
    <p>Contenido con overflow scroll. Este contenido es demasiado largo y mostrará barras de desplazamiento para verlo.</p>
</div>

<style>
    .contenido-scroll {
        width: 200px;
        height: 100px;
        overflow: scroll;
        background-color: lightblue;
    }
</style>

En este ejemplo, se mostrarán barras de desplazamiento incluso si el contenido no desborda, permitiendo al usuario desplazarse dentro del contenedor.

Ejemplo con overflow auto

<div class="contenido-auto">
    <p>Contenido con overflow auto. Este contenido es largo y mostrará barras de desplazamiento solo si es necesario.</p>
</div>

<style>
    .contenido-auto {
        width: 200px;
        height: 100px;
        overflow: auto;
        background-color: lightgreen;
    }
</style>

Con overflow: auto, las barras de desplazamiento solo aparecen si el contenido realmente lo requiere.

Control de overflow en ambos ejes

Además de overflow, CSS proporciona propiedades más específicas para controlar el desbordamiento en cada eje individual:

• overflow-x: Controla el desbordamiento horizontal.
• overflow-y: Controla el desbordamiento vertical.

.horizontal-scroll {
    width: 200px;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: lightyellow;
}

Consideraciones adicionales

1. Desempeño y usabilidad: Las barras de desplazamiento pueden afectar tanto el diseño como la usabilidad de una página web. Es crucial testear en varios dispositivos y escenarios para asegurar una experiencia de usuario óptima.
2. Interacción con otras propiedades: Las propiedades overflow pueden interactuar con otras propiedades CSS como position, z-index, y clip, afectando la visibilidad y el flujo del contenido de maneras complejas. Verifica tus diseños con distintas combinaciones para evitar conflictos.
3. Scrolling interno: Para elementos que tienen contenido dinámico, overflow: auto es generalmente una buena opción, ya que proporciona un comportamiento predecible y maneja bien las variaciones de contenido.

<div class="tarjeta">
    <div class="contenido-auto">
        <p>Contenido de scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

<style>
    .tarjeta {
        width: 300px;
        padding: 1em;
        border: 2px solid #ccc;
        background-color: #fff;
    }

    .contenido-auto {
        width: 100%;
        height: 150px;
        overflow: auto;
        background-color: #f9f9f9;
    }
</style>

Este ejemplo muestra una tarjeta con un contenedor de contenido desplazable, utilizando overflow: auto para manejar el contenido dinámico de manera eficiente.

Controlar el flujo del contenido y los desbordamientos dentro de las cajas en CSS es esencial para un diseño limpio y funcional. El uso adecuado de la propiedad overflow y sus variantes proporciona flexibilidad y precisión en el manejo del layout y la presentación del contenido.

display

La propiedad display en CSS es fundamental para definir cómo se comportan y visualizan los elementos en el flujo de documentos. Controla el tipo de caja en la que se presenta un elemento y su interacción con otros elementos en el diseño de la página. Los valores más utilizados de display son block, inline, inline-block, flex, grid, y none.

display: block

Un elemento con display: block se renderiza como un bloque, ocupando todo el ancho horizontal disponible. Estos elementos inician en una nueva línea y tienen un margen superior e inferior.

.bloque {
  display: block;
  width: 100%;
  background-color: lightblue;
}

Ejemplo en HTML:

<div class="bloque">Soy un bloque</div>
<div class="bloque">Soy otro bloque</div>

display: inline

Con display: inline, el elemento se comporta como texto. No inicia una nueva línea y solo ocupa el ancho necesario. Los márgenes y rellenos verticales no afectan su flujo.

.en-linea {
  display: inline;
  background-color: lightgreen;
}

Ejemplo en HTML:

<span class="en-linea">Soy un elemento en línea</span>
<span class="en-linea">Otro elemento en línea</span>

display: inline-block

display: inline-block combina características de block y inline. Los elementos inline-block permiten especificar un ancho y alto, pero fluyen en línea con otros elementos en lugar de comenzar en una nueva línea.

.en-linea-bloque {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: lightcoral;
}

Ejemplo en HTML:

<div class="en-linea-bloque">Soy un inline-block</div>
<div class="en-linea-bloque">Otro inline-block</div>

display: flex

display: flex activa el modo de caja flexible (flexbox), permitiendo un diseño de distribución complejo y responsivo con alineación y tamaño de los elementos hijos dentro de un contenedor flexible.

.contenedor-flex {
  display: flex;
  justify-content: space-between;
  background-color: lightgray;
}

.item-flex {
  background-color: lightyellow;
  padding: 10px;
  margin: 5px;
}

Ejemplo en HTML:

<div class="contenedor-flex">
  <div class="item-flex">Elemento 1</div>
  <div class="item-flex">Elemento 2</div>
  <div class="item-flex">Elemento 3</div>
</div>

display: grid

display: grid utiliza el modelo de diseño de grillas (CSS grid), permitiendo la construcción de diseños de grilla bidimensionales sofisticados.

.contenedor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: lightgoldenrodyellow;
}

.item-grid {
  background-color: lightpink;
  padding: 10px;
}

Ejemplo en HTML:

<div class="contenedor-grid">
  <div class="item-grid">Item 1</div>
  <div class="item-grid">Item 2</div>
  <div class="item-grid">Item 3</div>
  <div class="item-grid">Item 4</div>
</div>

display: none

display: none oculta un elemento completamente. No se renderiza en la página y no ocupa espacio en el flujo del documento.

.oculto {
  display: none;
}

Ejemplo en HTML:

<div class="oculto">No soy visible</div>
<div>Soy visible</div>

Otros valores de display

• inline-flex: Combina propiedades de inline con flex.
• table, table-row, table-cell: Simulan el comportamiento de las tablas HTML.
• list-item: Comporta el elemento como un elemento de lista.

Manipulación de display con JavaScript

Podemos cambiar el valor de display dinámicamente con JavaScript para lograr interacciones y comportamientos avanzados.

// Mostrar un elemento oculto
document.querySelector('.oculto').style.display = 'block';

// Ocultar un elemento
document.querySelector('.visible').style.display = 'none';

La propiedad display es crucial para controlar cómo se presentan los elementos en una página y es fundamental en la construcción de interfaces web responsivas y bien estructuradas.

Ejemplo completo

Vamos a desarrollar un ejemplo completo que incluye múltiples aspectos del modelo de caja en CSS, incluido el box-sizing, el margin auto, el overflow, y display. Este ejemplo unirá todos los conceptos tratados para mostrar cómo interactúan entre sí en un contexto real.

HTML

Primero, crearemos una estructura de HTML con varios elementos de bloque, contenedor y elementos hijos. Utilizaremos clases para aplicar estilos CSS.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo completo del modelo de caja en CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="contenedor-principal">
        <div class="cabecera">Cabecera</div>
        <div class="contenido">
            <div class="caja">Caja 1</div>
            <div class="caja">Caja 2</div>
            <div class="caja">Caja 3</div>
        </div>
        <div class="pie">Pie de página</div>
    </div>
</body>
</html>

CSS

Ahora, aplicaremos estilos CSS para cada clase en nuestro HTML. Abarcaremos varios conceptos como box-sizing, margin: auto, overflow, y display.

/* Global box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f4f4f4;
}

.contenedor-principal {
    width: 80%;
    max-width: 800px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.cabecera,
.pie {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.caja {
    width: 100%;
    max-width: 300px;
    padding: 20px;
    background-color: #e0e0e0;
    border: 2px solid #bbb;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

.caja:nth-child(even) {
    background-color: #d0d0d0;
}

Explicación de CSS

Global box-sizing: Aplicamos box-sizing: border-box globalmente para que todos los elementos incluyan padding y border en las dimensiones definidas por width y height.

* ,
*::before,
*::after {
    box-sizing: border-box;
}

Centrado del contenido principal: El body utiliza Flexbox para centrar el contenedor-principal tanto horizontal como verticalmente.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #f4f4f4;
}

Contenedor principal: Configuramos el contenedor-principal para ser un contenedor flexible que contiene la cabecera, contenido y pie de página.

.contenedor-principal {
    width: 80%;
    max-width: 800px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

Cabecera y pie de página: Se estilizan con un fondo azul (#3498db), texto blanco y se centran dentro del contenedor principal.

.cabecera,
.pie {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 20px 0;
}

Contenido: Utilizamos Flexbox para organizar las cajas verticalmente con espacio entre ellas.

.contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

Caja: Cada caja tiene width, padding, background-color, border. Utilizamos margin: auto para centrar horizontalmente cada caja dentro del contenedor.

.caja {
    width: 100%;
    max-width: 300px;
    padding: 20px;
    background-color: #e0e0e0;
    border: 2px solid #bbb;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

Visualización

Este ejemplo completo muestra cómo combinar múltiples propiedades del modelo de caja en CSS para crear un layout estructurado y adaptativo. El uso de display: flex en el contenedor principal y el contenido permite una distribución equitativa y centrada, box-sizing: border-box facilita el control de los tamaños de los elementos, y margin: auto ayuda a alinear las cajas. Este enfoque asegura que el diseño sea manejable y visualmente coherente a través de diferentes dispositivos.