Sesión 8 – Modelo de caja CSS

1

El modelo de cajaTodo elemento HTML es una caja rectangular

Todo elemento HTML es una caja rectangular compuesta por cuatro capas (de dentro hacia fuera):

Content (contenido) — El texto, la imagen o el contenido del elemento.
Padding (relleno interior) — Espacio entre el contenido y el borde. El fondo del elemento se extiende por el padding.
Border (borde) — Línea que rodea el padding y el contenido.
Margin (margen exterior) — Espacio entre el borde del elemento y los elementos vecinos. Es siempre transparente.

Padding y Margin

                CSS
.content-box {
    /* Padding: espacio interior */
    padding: 20px;              /* 20px en los 4 lados */
    padding: 10px 20px;         /* 10px arriba/abajo, 20px izq/der */
    padding: 5px 10px 15px 20px; /* arriba, derecha, abajo, izquierda */
    padding-top: 10px;          /* Solo arriba */

    /* Margin: espacio exterior */
    margin: 20px;               /* 20px en los 4 lados */
    margin: 10px auto;          /* 10px arriba/abajo, centrado horizontalmente */
    margin-bottom: 30px;        /* Solo abajo */

    /* Border */
    border: 2px solid #333;     /* grosor, estilo, color */
    border-radius: 8px;         /* Esquinas redondeadas */
}
            

2

Propiedad box-sizingControla cómo se calcula el tamaño total

Por defecto, width y height solo definen el tamaño del contenido. Padding y border se suman al tamaño total. Para cambiar este comportamiento:

                CSS
/* Recomendado: incluir padding y border dentro del width/height */
* {
    box-sizing: border-box;
}
            

+

content-box (defecto)

width = solo contenido. Tamaño total = width + padding + border.

=

border-box (recomendado)

width = contenido + padding + border. El tamaño total es el que defines.

3

BordesEstilos, grosor y esquinas redondeadas

                CSS
/* Estilos de borde */
.borde-solido { border: 2px solid black; }
.borde-punteado { border: 2px dotted gray; }
.borde-discontinuo { border: 2px dashed blue; }
.borde-doble { border: 4px double red; }

/* Borde solo en un lado */
.borde-inferior { border-bottom: 3px solid #333; }

/* Esquinas redondeadas */
.redondeado { border-radius: 10px; }
.circulo { border-radius: 50%; }  /* Hace un círculo si es cuadrado */

/* Borde para imágenes */
img {
    border: 3px solid #444;
    border-radius: 5px;
}
            

4

FondosColor, imagen y degradado

                CSS
/* Color de fondo */
header {
    background-color: navy;
    color: white;
    padding: 10px;
}

/* Imagen de fondo */
.hero {
    background-image: url('img/fondo.jpg');
    background-size: cover;        /* Cubrir todo el elemento */
    background-position: center;   /* Centrar la imagen */
    background-repeat: no-repeat;  /* No repetir */
}

/* Degradado */
.degradado {
    background: linear-gradient(to right, #667eea, #764ba2);
    color: white;
    padding: 40px;
}
            

5

Display: block, inline, inline-blockCómo se comportan los elementos

block — Ocupa todo el ancho disponible. Empieza en una nueva línea. Ejemplos: <div>, <p>, <h1>.
inline — Solo ocupa el ancho de su contenido. No acepta width ni height. Ejemplos: <span>, <a>, <strong>.
inline-block — Como inline (no fuerza salto de línea), pero acepta width, height, margin y padding.

                CSS
.etiqueta {
    display: inline-block;
    background-color: #e0e0e0;
    padding: 4px 12px;
    border-radius: 12px;
    margin: 4px;
    font-size: 14px;
}
            

6

Diagrama interactivoVisualiza content, padding, border y margin

Ajusta los valores y observa el modelo de caja

Margin: 20px

Border: 3px

Padding: 20px

Content: 120px

Contenido

Margin

Border

Padding

Content

.element { margin: 20px; border: 3px solid #333; padding: 20px; width: 120px; height: 120px; }

7

Ejercicio prácticoAplica lo aprendido

Añade la regla universal * { box-sizing: border-box; } al inicio de tu archivo CSS.
Crea una clase .card con padding, borde, border-radius y una sombra sutil.
Aplica márgenes para separar las diferentes secciones de tu página.
Añade un fondo de color al <header> con texto en blanco y padding.
Añade bordes redondeados a las imágenes.
Crea un degradado de fondo para una sección especial.
Crea una clase .etiqueta con display: inline-block y aplícala a varios elementos para que aparezcan en línea con padding y fondo.
Experimenta con margin: auto para centrar un elemento de bloque.