Tengo unos selectores para dar un ancho a los elementos de la página basados en porcentaje, el problema es que al dar un padding (que quiero que se mantenga fijo) a un determinado elemento, por ejemplo un input, esto afecta a su ancho, cosa que quiero evitar. Es decir que si a un elemento de asigno un selector para que tenga un ancho del 80% del total de su contenedor, no quiero que sea más ancho cuando le asigno un padding determinado. ¿Se puede controlar esto con CSS?
El código es una simplificación del problema:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.w-10 { width: 100%; }
.w-9 { width: 90%; }
.w-8 { width: 80%; }
.centered {
margin-left: auto;
margin-right: auto;
}
.input {
display: block;
/** el problema es el padding **/
padding: 1em;
}
</style>
</head>
<body>
<div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
<input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">
<div class="centered w-8" style="background: white">
<p>Ancho esperado...</p>
</div>
</div>
</body>
</html>