Cómo trabajar con el tamaño de caja en CSS
El comportamiento predeterminado de los navegadores al calcular el ancho de un elemento es aplicar el ancho y el alto calculados a laárea de contenido, sin tener en cuenta el relleno, el borde y el margen.
Este enfoque ha demostrado ser bastante complicado de trabajar.
Puede cambiar este comportamiento configurando elbox-sizing
propiedad.
losbox-sizing
La propiedad es de gran ayuda. Tiene 2 valores:
border-box
content-box
content-box
es el predeterminado, el que teníamos durante años antesbox-sizing
se convirtió en una cosa.
border-box
es lo nuevo y grandioso que estamos buscando. Si establece eso en un elemento:
.my-div {
box-sizing: border-box;
}
El cálculo de ancho y alto incluye el relleno y el borde. Solo se omite el margen, lo cual es razonable, ya que en nuestra mente también solemos ver eso como una cosa separada: el margen está fuera de la caja.
Esta propiedad es un pequeño cambio pero tiene un gran impacto. CSS Tricks incluso declaró undía internacional de concientización sobre el tamaño de las cajas, solo digo, y se recomienda aplicarlo a cada elemento de la página, listo para usar, con esto:
*, *:before, *:after {
box-sizing: border-box;
}
Descarga mi gratisManual de CSS
Más tutoriales de CSS:
- La guía de Flexbox
- Tutorial de cuadrícula CSS
- Variables CSS (propiedades personalizadas)
- Introducción a PostCSS
- La propiedad de margen CSS
- Cómo centrar un elemento con CSS
- Fuentes del sistema CSS
- Cómo imprimir tu HTML con estilo
- Una guía introductoria a las transiciones CSS
- Un tutorial de animaciones CSS
- Introducción a CSS
- La guía CSS
- Cómo configurar Tailwind con PurgeCSS y PostCSS
- La hoja de trucos de Tailwind
- Cómo rotar continuamente una imagen usando CSS
- Hacer que una tabla responda usando CSS
- Cómo depurar CSS biseccionando
- Selectores CSS
- Cascada CSS
- Especificidad CSS
- Selectores de atributos CSS
- Colores CSS
- Unidades CSS
- URL de CSS ()
- Tipografía CSS
- El modelo de caja CSS
- La propiedad de posición CSS
- Consultas de medios CSS y diseño receptivo
- Consultas de funciones CSS
- Transformaciones CSS
- Cómo diseñar listas usando CSS
- Prefijos de proveedores de CSS
- Herencia CSS
- Pseudoclases CSS
- Pseudoelementos CSS
- Diseñar tablas HTML con CSS
- La propiedad de visualización de CSS
- La función CSS calc ()
- Bordes CSS
- Importando un archivo CSS usando @import
- Manejo de errores CSS
- Filtros CSS
- Tamaño de caja CSS
- Fondos CSS
- Comentarios CSS
- Fuentes CSS
- Relleno CSS
- La propiedad flotante de CSS y su compensación
- Normalización de CSS
- La propiedad de índice z de CSS
- Cómo deshabilitar la selección de texto usando CSS
- Cómo poner un elemento en la parte inferior de su contenedor usando CSS
- Cómo invertir colores usando CSS
- Etiquetas previas receptivas en CSS
- Incrustaciones de video de YouTube receptivas
- ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
- Cómo alinear el centro en flexbox