CSS Box Model

Cada elemento HTML es una caja: contenido, padding, border y margin.

Box Model Playground Interactivo

Modifica cada capa del modelo de caja y observa el resultado en tiempo real.

margin
border
padding
content

                

              

            

          


          

            

              overflow
              Desbordamiento
            

            
Controla qué ocurre cuando el contenido supera el tamaño de su caja.

            

              

                

                  visible
sale fuera de la caja
                

                

                  hidden
el texto que sobrepase el alto se cortará y no será visible
                

                

                  scroll
scroll siempre visible aunque no haga falta aquí
                

                

                  auto
scroll solo cuando el contenido no cabe en el espacio disponible
                

              

            

          


          

            

              outline · box-shadow
              Decoración
            

            
outline no forma parte del box model (no ocupa espacio). box-shadow añade sombras externas e internas (inset).

            

              

                
outline: no ocupa espacio

                
box-shadow: 4px 4px 0

                
múltiple + inset

              

            

          


        
          

            

              border-radius — Playground
              Interactivo
            

            
Redondea las esquinas de cualquier elemento. Acepta 1–4 valores (TL TR BR BL) o valores X/Y para esquinas elípticas.

            

              

                

                  

                    
                    
                    
                    
                  

                  

                    
                    
                    
                    
                  

                

                

                  

                  
border-radius: 12px

                

              

            

          


          

            

              box-shadow — Playground
              Interactivo
            

            
Sombras en la caja del elemento. Soporta múltiples capas separadas por coma y sombras internas con inset.

            

              

                

                  
                  
                  
                  
                  
                  
                

                

                  

                  
box-shadow: 4px 6px 16px rgba(0,0,0,.25)

                

              

            

          


          

            

              scroll-margin · scroll-padding
              Scroll
            

            
scroll-margin añade margen al elemento cuando se navega a él con un ancla (#id) o con scrollIntoView(). scroll-padding va en el contenedor.

            

              
/* Evita que el header fijo tape el target */
:root { scroll-padding-top: 80px; }

/* Margen extra en el elemento target */
.section { scroll-margin-top: 100px; }

/* CSS Scroll Snap */
.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.slide {
  scroll-snap-align: start;
  scroll-margin-left: 16px;
}

            

          


          

            

              Propiedades lógicas del box model
              Lógico
            

            
Equivalentes lógicos de las propiedades físicas. Se adaptan automáticamente al writing-mode y dirección del texto.

            

              

                margin-top→margin-block-start
                margin-bottom→margin-block-end
                margin-left→margin-inline-start
                margin-right→margin-inline-end
                border-top→border-block-start
                width→inline-size
                height→block-size
              

              
/* Shorthand lógico */
margin-block:  8px 16px;   /* top / bottom */
margin-inline: auto;        /* left / right */
padding-block: 12px;
inset-inline:  0;           /* left: 0; right: 0 */

            

          


          

            

              Shorthand de espaciado
              Referencia
            

            
Un valor, dos, tres o cuatro → lados en el sentido de las agujas del reloj. auto en margin centra horizontalmente un bloque.

            

              

                margin: 16pxlos 4 lados = 16px
                margin: 8px 16px↕ 8px  ↔ 16px
                margin: 8px 12px 16pxtop 8 · ↔ 12 · bottom 16
                margin: 4px 8px 12px 16pxT R B L (horario)
                margin: 0 autocentra el elemento (necesita width)
              

              
.centrado { width: 800px; margin: 0 auto; }
/* Moderno equivalente */
.centrado { width: 800px; margin-inline: auto; }