Teoría
Teoría

Limitaciones del modelo de cajas estándar

En el ejercicio anterior vimos cómo funciona width: 100%. Ahora vamos a ver un caso frecuente al crear una interfaz.

Imagina un formulario cuyos campos deben ocupar todo el ancho del contenedor y tener un relleno fijo para que el texto no quede pegado a los bordes. El formulario puede tener distintos anchos. Para sus campos podríamos usar estos estilos:

input[type="text"] {
  width: 100%;
  padding: 0 10px;
}

El ancho del 100% hará que los campos tengan el mismo ancho que el bloque padre, y padding añadirá espacio interior. Pero, como ya habrás adivinado, ese relleno hará que el campo sea más ancho que su contenedor. Y ahí surge el problema.

Vamos a comprobarlo en la práctica.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Limitaciones del modelo de cajas estándar</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <form action="https://codigoheroe.com/echo" method="post"> <div class="block" style="width: 200px;"> <input type="text" value="Apellido"> </div> <div class="block" style="width: 250px;"> <input type="text" value="Nombre"> </div> <div class="block" style="width: 300px;"> <input type="text" value="Segundo nombre"> </div> </form> </body> </html>

CSS

body { padding: 20px; } .block { margin-bottom: 20px; padding: 20px; } input[type="text"] { font-size: 16px; color: #666666; border: 2px solid black; }

ObjetivosRealizado

Asigna un ancho del 100% a los campos del formulario.
Asígnales un relleno vertical de 10px y horizontal de 20px.