Aplica la propiedad box-sizing: border-box
a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.
Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin
, padding
, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.
Mas detalles aca: Box Sizing
* {
box-sizing: border-box;
}
<!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>