Ciencias de la Computación · Ceibal · Parte 1 de 2: Conceptos básicos
📦 Modelo de Caja
Sección 1 de 6

Todo en una web es una caja

El secreto mejor guardado de CSS: absolutamente todo lo que ves en una página es una caja rectangular. Entender esa caja y sus cuatro capas es entender cómo se arma cualquier diseño.

🧠 Todo es una caja

Esta es quizás la idea más importante de todo CSS, y al principio cuesta verla: cada elemento de una página —un párrafo, una imagen, un botón, un título— es en realidad una caja rectangular. No se ven los bordes de esas cajas, pero están ahí. Entender cómo está hecha cada caja es entender cómo se arma una página entera.

Cada caja tiene cuatro capas, una alrededor de la otra: el contenido en el centro, un relleno a su alrededor, una línea que la delimita (el borde) y un espacio libre hacia afuera. Mirá el diagrama de adentro hacia afuera →

1️⃣ content

Es el corazón de la caja: el texto, la imagen o lo que sea que va adentro. Su tamaño base lo controlan width y height (que vemos en la próxima sección).

📦 content es la capa MÁS interna: todo lo demás (padding, border, margin) existe alrededor de ella.
🧩 ¿Lo entendiste? · Ordená las capas
1 · Ordenar: las capas de adentro hacia afuera

Arrastrá las capas del modelo de caja desde la MÁS interna hasta la MÁS externa.

2️⃣ padding

Es el espacio entre el contenido y el borde, por dentro de la caja. Cuanto mayor es el padding, más se aleja el contenido del borde, y más aire queda a su alrededor.

.tarjeta {
  padding: 20px; /* relleno en los 4 lados */
}
🧩 ¿Lo entendiste? · Arrastrá cada capa a su descripción
2 · Arrastrar y soltar: cada capa con su descripción

Arrastrá la capa correcta a cada descripción. Hay capas trampa.

El contenido real (texto, imagen) →
Relleno entre contenido y borde →
Aire que separa de otras cajas →
🎬 Video: Padding (min 01:27:46)

3️⃣ border

Es la línea que rodea el padding y el contenido. Le da forma visible a la caja. La estudiamos en detalle en la sección de Bordes.

.tarjeta {
  border: 2px solid black;
}
🧩 ¿Lo entendiste? · Completá las propiedades
3 · Completar: las cuatro capas
/* Relleno interior de 20 píxeles */
.caja { : 20px; }

/* Aire exterior de 16 píxeles */
.caja { : 16px; }

/* La pared de la caja */
.caja { : 2px solid black; }

📏 Antes de seguir: las unidades

Antes de ver margin, una pausa necesaria: en CSS, un número solo no alcanza. Toda medida necesita una unidad pegada al número, si no el navegador directamente ignora la línea.

Por ahora vas a usar casi siempre px (píxel): una unidad absoluta, fija, fácil de predecir. Más adelante existen otras unidades (%, em, rem, vw, vh) que se adaptan a la pantalla — tienen su propia sección completa más adelante (📏 Unidades). Esto es solo un adelanto para que los números de margin tengan sentido.

/* ✅ Válida: número + unidad */
.caja {
  padding: 20px;
}

/* ❌ Inválida: falta la unidad, el navegador la ignora */
.caja {
  padding: 20;
}
💡 Regla de oro: si escribís un número de medida en CSS, casi siempre necesita su unidad pegada, sin espacio: 20px, no 20 px ni 20.

4️⃣ margin

Es el espacio fuera de la caja, que la separa de las cajas vecinas. Cuanto mayor es el margin, mayor la distancia con los demás elementos de la página.

💡 La gran diferencia: padding empuja hacia ADENTRO (aleja el contenido del borde) y margin empuja hacia AFUERA (aleja la caja de sus vecinas). Confundirlos es el error #1 de quien empieza.
.tarjeta {
  margin: 16px; /* aire alrededor de la caja */
}
⚠️ Cada propiedad acepta valores por lado: padding: 10px 20px; es 10px arriba/abajo y 20px a los lados. Y padding-top, margin-left, etc., controlan un solo lado.
✅ Repaso rápido · Opción múltiple
4 · Opción múltiple: el modelo de caja
🎬 Video: Margin (Márgenes) (min 01:20:39)

🔢 Atajo de 1 a 4 valores

Tanto padding como margin aceptan de 1 a 4 valores en una sola declaración.

💡 El orden de 4 valores se recuerda como las agujas del reloj, empezando desde arriba (12 en punto): arriba → derecha → abajo → izquierda.
Cantidad de valoresSe interpretan comoEjemplo
1 valorLos 4 lados por igualpadding: 10px;
2 valoresArriba/abajo · Izquierda/derechapadding: 10px 20px;
3 valoresArriba · Izquierda/derecha · Abajopadding: 10px 20px 5px;
4 valoresArriba · Derecha · Abajo · Izquierda (sentido horario)padding: 10px 20px 5px 15px;
🧩 ¿Lo entendiste? · Cada shorthand con su significado
6 · Arrastrar y soltar: ¿qué significa cada shorthand?

Arrastrá cada declaración al significado que le corresponde. Hay declaraciones trampa.

Los 4 lados iguales →
Arriba/abajo y izq/der →
Arriba, izq/der, abajo →
Arriba, derecha, abajo, izquierda →
🧩 ¿Lo entendiste? · Completá centrado y espaciado
7 · Completar: centrar y espaciar

Completá la propiedad o el valor según el comentario.

/* Centrar horizontalmente un contenedor de 800px */
.contenedor {
  width: 800px;
  margin: ;
}

/* Padding de 15px arriba/abajo y 25px a los costados */
.tarjeta { padding: ; }

/* Solo margen inferior de 20px */
.parrafo { : 20px; }

🎯 Centrar con margin: 0 auto;

Casi nunca queremos que el contenido principal ocupe toda la ventana en pantallas grandes: limitarlo y centrarlo mejora la lectura. La receta clásica para centrar un elemento de bloque que ya tiene un ancho definido:

1Asegurate de que el elemento sea display: block (la mayoría de los contenedores ya lo son).
2Dale un ancho explícito con width o max-width.
3Aplicá margin-left: auto; y margin-right: auto; — o el atajo margin: 0 auto;
⚠️ Este truco no funciona sin un ancho definido. Si el elemento no tiene width o max-width, ya ocupa todo el ancho disponible y no hay "espacio sobrante" para repartir.
.contenedor {
  width: 600px;
  margin: 0 auto; /* 0 arriba/abajo, auto a los lados */
}
💡 margin: 0 auto; le dice al navegador: "repartí el espacio sobrante en partes iguales a la izquierda y a la derecha". Por eso el elemento queda centrado horizontalmente.
🧩 ¿Lo entendiste? · Ordená los pasos para centrar
5 · Ordenar: los pasos para centrar una caja

Arrastrá los pasos hasta dejarlos en el orden correcto de la receta para centrar un elemento con margin.

✅ Repaso rápido · Opción múltiple
8 · Opción múltiple: shorthand y centrado

Elegí una opción por pregunta.

⚙️ Vé la caja en vivo

Mové los deslizadores y observá cómo padding, border y margin transforman la misma caja. Esta es la mejor forma de entenderlo: jugando.

Soy una caja

    
El rayado de fondo te ayuda a ver el margin (aire exterior). La pared rosa es el border. El espacio celeste interior es el padding.

  

        

        

      

    

    

      
      

      
    

  




  

        🎯 PRÁCTICA de Box Model — separá y aireá las tarjetas
        

        
    
          
  1. En la clase .tarjeta, agregá padding: 18px; para que el texto respire dentro del borde.
    2. 
          
  2. En la misma clase, agregá margin: 12px; para separar las tarjetas entre sí.
    3. 
          
  3. Ejecutá y confirmá que el texto ya no toca el borde y que las tres tarjetas quedaron separadas.
    4. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      


  

        🎯 RETO: centrá y aireá una tarjeta
        

        
    
          
  1. En .pagina, agregá margin: 0 auto; para centrar el contenedor (ya tiene un width definido).
    2. 
          
  2. En .titulo, agregá padding: 15px 20px; (2 valores: arriba/abajo y costados).
    3. 
          
  3. En .parrafo, agregá padding: 20px; (1 valor, los 4 lados iguales).
    4. 
          
  4. Ejecutá y confirmá que la página quedó centrada y con más aire alrededor del texto.
    5. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
Controlar el tamaño de las cajas

  
Una vez que sabés que todo es una caja, el siguiente paso es decidir cuánto mide. Y el truco no es fijar tamaños exactos, sino que se adapten a cada pantalla.


    

    

      

      
      
      
      

    

    

    

      

        
📐 width y height

        

        

          
Por defecto, las cajas se estiran o se encogen según su contenido. Pero muchas veces querés decidir vos el tamaño: una imagen que no supere cierto ancho, una columna fija, una tarjeta que no se deforme. Para eso están width, height y sus versiones "máximas".

          
width fija el ancho del contenido y height el alto. Pensalos como decirle a la caja "vas a medir exactamente esto".

        

        


.banner {
  width: 300px;
  height: 150px;
}

        



        🧩 ¿Lo entendiste? · Ordená de lo más rígido a lo más flexible
        


1 · Ordenar: de la más restrictiva a la más flexible

        
Ordená estas reglas de ancho desde la que da un tamaño MÁS rígido hasta la MÁS adaptable.

        

        
        

      
        

      



        🧩 ¿Lo entendiste? · Cada propiedad con su efecto
        


2 · Arrastrar y soltar: cada propiedad con su efecto

        

        

          
Ancho exacto → 

          
Nunca más ancha que… → 

          
Alto exacto → 

        

        
        

      
        

      



        🎬 Video: Alto y Ancho (Height & width) (min 01:31:39)
        

          

        

      

        

      


      

        
🚧 max-width y max-height

        

        

          
Estas son las más útiles para diseño responsivo (que se adapta a cualquier pantalla). max-width dice "podés ser más chica, pero nunca más ancha que esto". Así una imagen se achica en el celular pero no se desborda gigante en la compu.

          
💡 max-width: 100% en las imágenes es uno de los trucos más usados de la web: garantiza que ninguna foto rompa el diseño en pantallas chicas.

        

        


img {
  max-width: 100%; /* nunca más ancha que su contenedor */
}
.contenido {
  max-width: 700px; /* lectura cómoda en pantallas grandes */
}



    
PropiedadQué haceCuándo usarla

    
      
widthAncho fijoCuando el ancho debe ser exacto

      
heightAlto fijoCuando el alto debe ser exacto

      
max-widthAncho máximoDiseño responsivo (lo más usado)

      
max-heightAlto máximoLimitar imágenes o paneles altos

    
  

        



        🧩 ¿Lo entendiste? · Completá las propiedades de tamaño
        


3 · Completar: tamaños

        
/* Caja de 250px de ancho */
.col { : 250px; }

/* Imagen que nunca supera el ancho del contenedor */
img { : ; }

        
        

      
        

      



        ✅ Repaso rápido · Opción múltiple
        


4 · Opción múltiple: tamaños

        

      
        

      

        

      


      

        
⚙️ Probá los tamaños en vivo

        

        

          
Movés el ancho y el alto con los deslizadores y ves la caja cambiar en tiempo real. Es la mejor forma de sentir la diferencia entre un tamaño fijo y uno flexible.

        

        



    

      
      
    

    

      
width × height

    

    

  

        

        

      

    

    

      
      

      
    

  




  

        🎯 PRÁCTICA de Tamaño — una imagen que no se desborda
        

        
    
          
  1. En la clase .foto, agregá max-width: 100%; para que nunca sea más ancha que su contenedor.
    2. 
          
  2. Ejecutá y confirmá que la foto ahora cabe dentro del recuadro, sin desbordarse.
    3. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
Dibujar y redondear los bordes

  
Los bordes son la "pared" visible de la caja. Con tres ingredientes (ancho, estilo y color) y un toque de redondeo, cambiás por completo la personalidad de un elemento.


    

    

      

      
      
      
      
      
      

    

    

    

      

        
🔲 border — los tres datos juntos

        

        

          
El borde es la pared visible de la caja. La propiedad border resume tres cosas en una línea: ancho, estilo y color.

          
La forma rápida escribe los tres valores en orden: ancho · estilo · color.

        

        


.caja {
  border: 3px solid #00f5ff;
}
/*        ↑     ↑      ↑
       ancho estilo color */

        



        🧩 ¿Lo entendiste? · Ordená la sintaxis de border
        


1 · Ordenar: la sintaxis de border

        
Armá la regla border en el orden correcto de sus tres datos.

        

        
        

      
        

      



        🎬 Video: Bordes (min 01:06:45)
        

          

        

      

        

      


      

        
🖌️ El estilo del borde

        

        

          
El valor del medio define cómo se ve la línea. Los más usados: línea continua, guiones, puntos o directamente sin borde.

        

        



    
EstiloCómo se ve

    
      
solidLínea continua (el más común)

      
dashedLínea de guiones — — —

      
dottedLínea de puntos · · ·

      
noneSin borde

    
  

        



        🧩 ¿Lo entendiste? · Cada valor con su parte
        


2 · Arrastrar y soltar: cada valor con su parte

        

        

          
Ancho → 

          
Estilo → 

          
Color → 

        

        
        

      
        

      

        

      


      

        
🔍 Cada dato por separado

        

        

          
Si necesitás controlar uno solo, hay propiedades específicas para el ancho, el estilo y el color del borde, en vez de escribir el atajo completo.

        

        


.caja {
  border-width: 2px;
  border-style: dashed;
  border-color: #ff4dff;
}

        

        

      


      

        
⭕ border-radius — esquinas redondeadas

        

        

          
Redondea las esquinas de la caja. Cuanto mayor el valor, más redondas. Un valor muy alto (o 50% en un cuadrado) crea un círculo perfecto — así se hacen los avatares redondos.

        

        


.boton { border-radius: 8px; }   /* esquinas suaves */
.avatar { border-radius: 50%; } /* círculo perfecto */

        



        🧩 ¿Lo entendiste? · Completá bordes y redondeo
        


3 · Completar: bordes y redondeo

        
/* Borde sólido de 2px rojo */
.caja { border: 2px  red; }

/* Esquinas redondeadas de 12px */
.tarjeta { : 12px; }

/* Avatar perfectamente circular */
.avatar { border-radius: ; }

        
        

      
        

      



        ✅ Repaso rápido · Opción múltiple
        


4 · Opción múltiple: bordes

        

      
        

      

        

      


      

        
⚙️ Diseñá tu borde en vivo

        

        

          
Cambiá el ancho, el estilo y el redondeo con los controles y mirá cómo la misma caja cambia por completo su personalidad visual.

        

        



    

      
      
      
    

    

      
Mi borde

    

    

  

        

        

      

    

    

      
      

      
    

  


  

        🎯 PRÁCTICA de Bordes — convertí un cuadrado en avatar
        

        
    
          
  1. En .avatar, agregá border-radius: 50%; para convertir el cuadrado en un círculo.
    2. 
          
  2. En .boton, agregá border: 2px solid #00f5ff;.
    3. 
          
  3. En la misma clase .boton, agregá border-radius: 8px; para redondear sus esquinas.
    4. 
          
  4. Ejecutá y confirmá el avatar circular y el botón con borde redondeado.
    5. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
¿Píxeles o porcentajes? Las unidades de CSS

  
No es lo mismo medir en píxeles fijos que en unidades que se adaptan. Elegir bien la unidad es la diferencia entre un sitio rígido y uno que se ve bien en cualquier dispositivo.


    

    

      

      
      
      
      

    

    

    

      

        
📏 Absolutas: px

        

        

          
Cuando escribís font-size: 16px o width: 50%, ese px o ese % es una unidad de medida. Hay dos grandes familias: las absolutas (siempre miden lo mismo) y las relativas (miden en relación a algo más).

          
El píxel (px) es la unidad absoluta más usada: un tamaño fijo, exacto, que no cambia. Es predecible y fácil de entender — ideal para bordes finos o detalles que deben medir siempre lo mismo.

        

        


.borde { border: 2px solid black; }
h1 { font-size: 32px; }

        



        🧩 ¿Lo entendiste? · De absoluta a más relativa
        


1 · Ordenar: de absoluta a "más relativa"

        
Ordená estas unidades desde la ABSOLUTA (fija) hacia las que dependen de cosas cada vez más grandes.

        

        
        

      
        

      



        🎬 Video: Unidades de medida (min 01:16:47)
        

          

        

      

        

      


      

        
🌊 Relativas: em, rem, %, vw, vh

        

        

          
Las unidades relativas se calculan respecto a otra cosa, y por eso son las reinas del diseño adaptable.

          
💡 rem vs em: rem siempre mira a la página (predecible), em mira al elemento (puede acumularse y volverse confuso). Para tamaños de texto, rem suele ser la opción más segura.

          
💡 vw y vh son geniales para secciones a pantalla completa: height: 100vh hace que un bloque ocupe exactamente toda la altura visible, sin importar el dispositivo.

        

        



    
UnidadRelativa a…Ejemplo

    
      
%El tamaño del elemento padrewidth: 50% = la mitad del contenedor

      
emEl tamaño de fuente del elemento2em = el doble de su letra

      
remEl tamaño de fuente de la raíz (la página)1.5rem = 1,5× la base

      
vwEl ancho de la ventana (viewport width)100vw = todo el ancho de pantalla

      
vhEl alto de la ventana (viewport height)100vh = toda la altura de pantalla

    
  

        



        🧩 ¿Lo entendiste? · Cada unidad con su referencia
        


2 · Arrastrar y soltar: cada unidad con su referencia

        

        

          
Mide siempre lo mismo (absoluta) → 

          
Relativa al elemento padre → 

          
Relativa al ancho de la ventana → 

          
Relativa a la fuente de la página → 

        

        
        

      
        

      



        🧩 ¿Lo entendiste? · Completá con la unidad correcta
        


3 · Completar: unidades

        
/* Sección que ocupa toda la altura de la pantalla */
.hero { height: 100; }

/* Caja a la mitad del ancho de su contenedor */
.col { width: 50; }

/* Texto a 1,5 veces la fuente base de la página */
h2 { font-size: 1.5; }

        
        

      
        

      



        ✅ Repaso rápido · Opción múltiple
        


4 · Opción múltiple: unidades

        

      
        

      

        

      


      

        
⚙️ Compará unidades en vivo

        

        

          
La caja mide lo mismo en número, pero la unidad cambia todo. Cambiá el valor y la unidad y observá cómo reacciona.

        

        



    

      
      
    

    

      
width: 50%

    

    

    
Con % la caja se mide respecto al recuadro que la contiene. Con px mide siempre lo mismo. Con vw se mide respecto al ancho de toda la pantalla.

  

        

        

      

    

    

      
      

      
    

  


  

        🎯 PRÁCTICA de Unidades — una portada a pantalla completa
        

        
    
          
  1. En .hero, agregá height: 60vh; para que la portada ocupe el 60% de la altura de la pantalla.
    2. 
          
  2. En h1, agregá font-size: 2rem; para que el título escale con la fuente de la página.
    3. 
          
  3. Ejecutá y probá cambiar el 60vh a 100vh para ver la diferencia.
    4. 
        

        

          

            
            
          

          

            
/ HTML

            

          

          
          

            
            
            
          

          

        

      

      








  
¡Armá tu primera tarjeta! 🚀

  
Llegó el momento de juntar todo lo que practicaste: el modelo de caja, el tamaño, los bordes y las unidades de medida.


  

    
🎯 MISIÓN: La tarjeta de producto básica

    
Vas a maquetar la tarjeta de un producto inventado. Tu tarjeta debe tener:

    
    
      
  • Un box model cuidado: padding interno y margin externo
    • 
      
  • Un tamaño controlado con max-width (responsivo)
    • 
      
  • Bordes con border-radius (esquinas redondeadas)
    • 
      
  • Al menos una unidad relativa (%, rem…) en algún elemento
    • 
    

    
💡 En la Parte 2 de este recurso vas a retomar esta misma tarjeta para sumarle display: flex y position: absolute — ¡esta es la base!

  


  
🛤️ Flujo de trabajo (método paso a paso)

  

    
1
📦 Armá la caja: padding y margin de la tarjeta.

    
2
📐 Limitá el tamaño con max-width.

    
3
🔲 Redondeá los bordes con border-radius.

    
4
📏 Usá una unidad relativa en el ancho de la foto.

    
5
📥 Ejecutá, ajustá y descargá tu trabajo.

  


  

  💻 Tu simulador
  

  
El HTML ya está armado con todo lo que necesitás para la misión: vos ponés el CSS. Tab inserta 2 espacios.

  
    
    
  1. En .tarjeta-producto, agregá padding y margin para darle aire por dentro y por fuera.
    2. 
    
  2. En la misma clase, agregá max-width (por ejemplo 20rem) para que la tarjeta no crezca sin límite.
    3. 
    
  3. Agregá border-radius a .tarjeta-producto para redondear sus esquinas.
    4. 
    
  4. En .foto-producto, agregá width: 100%; (una unidad relativa) para que la foto ocupe todo el ancho disponible.
    5. 
    
  5. Ejecutá, ajustá los detalles y descargá tu tarjeta terminada.
    6. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
      
    

    

  

  

  








  
📖 Glosario interactivo

  
Tocá cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.