Teoría
Teoría

Cambiar el modelo de cajas: box-sizing

Resolver el problema del ancho de los campos que se estiran no es sencillo. Lo ideal sería cambiar la forma de calcular el ancho de un elemento para que width definiera el ancho total en lugar del ancho del contenido.

Por suerte, CSS permite hacerlo con la propiedad box-sizing.

Esta propiedad tiene dos valores:

content-box: el valor predeterminado, que corresponde al modelo de cajas estándar.
border-box: cambia el cálculo del ancho como acabamos de describir. Ahora el ancho del elemento incluye los bordes, el relleno y el ancho del propio contenido.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cambiar el modelo de cajas: box-sizing</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"] { width: 100%; padding: 10px 20px; font-size: 16px; color: #666666; border: 2px solid black; }

ObjetivosRealizado

Asigna la propiedad box-sizing con el valor border-box a los campos del formulario.