[CSS] Comparación entre ancho 100% y 50% | Uso de w-100
En esta guía comparamos width: 100%; y width: 50%; para entender en qué situaciones es útil cada uno.
🔹 Código parcial
<div class="w-100">
Elemento con ancho configurado al 100%.
</div>
<style>
.w-100 {
width: 100%;
}
</style>
💻 Código completo funcional (solo pegar en HTML)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Comparación entre ancho 100% y 50%</title>
<style>
.w-100 {
width: 100%;
background-color: #90EE90;
padding: 1rem;
}
.w-50 {
width: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="w-100">Elemento con ancho 100%</div>
<div class="w-50">Elemento con ancho 50%</div>
</body>
</html>
🧩 Aplicaciones y uso práctico
width: 100%; es la manera más básica de adaptar un elemento al ancho de su contenedor. Es muy útil en diseño responsivo.
width: 50%; es útil para colocar elementos en columnas paralelas.
📚 Uso práctico de la propiedad width
La propiedad width en CSS controla el ancho de un elemento. Usar % o px da comportamientos diferentes: % es relativo al contenedor padre y px es un valor absoluto.
🔍 Ventajas del uso de % en diseño responsive
width: 100%; es muy útil para diseño adaptable, ya que se ajusta al contenedor (usualmente el viewport). Es común usarlo con media queries.
📊 Diseños con múltiples columnas
width: 50%; es útil para dividir el espacio horizontal. Pero necesitas usar display: inline-block, float o Flexbox/Grid para que no se apilen. Usa display: flex; flex-wrap: wrap; en el contenedor padre para alinearlos en fila.
Nota: con %, el padding y el borde no se incluyen. Usa box-sizing: border-box para incluirlos y facilitar el control del diseño.