4.1 Propiedad box-sizing
La propiedad box-sizing en CSS es una herramienta poderosa para gestionar el modelo de medida de los elementos.
Define cómo se calculan las dimensiones del elemento, incluyendo ancho y alto, así como padding, bordes y márgenes.
A continuación, discutimos en detalle cómo funciona box-sizing y cómo su uso puede afectar el diseño
de una página web.
Principales modelos de box-sizing
Content-box (modelo de contenido)
El valor content-box es el valor predeterminado para todos los elementos. En este modelo, las dimensiones del elemento
(width y height) solo definen el tamaño del contenido, excluyendo padding y bordes. Esto significa que
el padding y los bordes se añaden al ancho y alto total del elemento.
Border-box (modelo de bordes)
El valor border-box cambia el modelo de medida de forma que las dimensiones del elemento (width y height)
incluyen padding y bordes. Esto significa que el padding y los bordes están dentro del ancho y alto total del elemento,
simplificando los cálculos y la gestión de los tamaños del elemento.
Ejemplo de uso de box-sizing:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: el ancho y alto solo incluyen el contenido.</div>
<div class="box border-box">Border-box: el ancho y alto incluyen el padding y bordes.</div>
Explicación del código:
.box: estilo base para todas las cajas, incluyendo padding, bordes y dimensiones.content-box: elemento con box-sizing: content-box, donde el ancho y alto solo incluyen el contenido.border-box: elemento con box-sizing: border-box, donde el ancho y alto incluyen el padding y bordes
4.2 Impacto de box-sizing en el diseño
Modelo de contenido (Content-box)
Cuando se usa box-sizing: content-box;, el padding y bordes se añaden al ancho y alto total del elemento.
Esto puede requerir de un cálculo adicional al considerar las dimensiones y posicionamiento de los elementos.
Ejemplo de uso
En este caso, el ancho total del elemento será
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px,
y el alto total será 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: el ancho y alto solo incluyen el contenido.</div>
Modelo de bordes (Border-box)
Cuando se usa box-sizing: border-box;, el padding y bordes están incluidos en las dimensiones especificadas del elemento.
Esto simplifica los cálculos y la gestión de las dimensiones del elemento, especialmente al crear diseños responsivos.
Ejemplo de uso:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: el ancho y alto incluyen el padding y bordes.</div>
4.3 Creación de un diseño responsivo
Usar box-sizing: border-box; facilita la creación de diseños responsivos, ya que
los tamaños de los elementos incluyen padding y bordes, previniendo desbordamientos inesperados.
Ejemplo de uso:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
<div class="item">Elemento 4</div>
<div class="item">Elemento 5</div>
<div class="item">Elemento 6</div>
</div>
Explicación del código:
* { box-sizing: border-box; }: aplicación del modelo de bordes a todos los elementos en la página para simplificar el manejo de tamaños.container: Contenedor Flex con un diseño responsivo.item: Elementos Flex con distribución equitativa del ancho e inclusión de padding y border en el ancho total
4.4 Dimensiones fijas con padding
Usar box-sizing: border-box; permite definir fácilmente dimensiones fijas para elementos
con padding, sin preocuparse por el desbordamiento.
Ejemplo de uso:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Centrando texto verticalmente */
}
<div class="fixed-size">
Dimensiones fijas
</div>
Explicación del código:
.fixed-size: elemento con dimensiones fijas de 300x150 píxeles, incluyendo padding y border, lo que permite un control exacto sobre su tamaño
GO TO FULL VERSION