Na pewno potrzebujesz ten margines na zewnątrz, czy nie? Bo podajesz przykład z samym dopełnieniem i szerokością. Da się coś takiego zrobić przy pomocy ujemnych marginesów. Musiałbym to jednak sobie sprawdzić na boku, bo z pamięci Ci takich sztuczek wolę nie dyktować. Podaj od razu wartości dopełnień i marginesów.
Trafiłeś na coś, w czym CSS nie jest najlepszy, delikatnie mówiąc. W wersji 3.0 to się zmieni, ale obecnie model pudełkowy jest trochę... niewygodny w takich przypadkach. Jest jednak workaround, wolę go jednak wytłumaczyć na przykładzie.
edit:
OK
<div class="container">
<input type="text" value="blabla" name="test"><!-- value zeby bylo widac padding -->
</div>
.container {
/* istotne: */
padding: 0 20px; /* 20 = żądane dopełnienie inputa + obramowanie inputa + margines inputa
* (wszystkie wartości tylko dla jednej strony, nie sumarycznie lewa+prawa)
*/
/* to juz jest tylko dla testow: */
width: 400px;
height: 30px;
background: #CCC;
}
.container input {
/* istotne: */
width: 100%; /* to zawsze ustawiasz na 100% */
border: 1px solid #000; /* obramowanie inputa */
padding: 0 5px; /* dopelnienie inputa */
margin: 0 -6px; /* -6 = -(dopelnienie inputa + obramowanie inputa) */
/* dla testow: */
background: #EEE;
}
Ten kod generuje taki elastyczny input, jak chcesz. Daje mu 5-pikselowe dopełnienie, 1-pikselowe obramowanie i 14-pikselowy margines. Generalnie zaczynasz od tego, że wymyślasz sobie, że inputowi dasz dopełnienie na P pikseli, obramowanie na B pikseli i margines po bokach na M pikseli.
Dla inputa, dopełnienie poziome ustawiasz na P, obramowanie na B, a margines poziomy na -1 * (P + B). W elemencie zawierającym musisz zaś ustawić poziome dopełnienie na P + B + M pikseli. Skleciłem to na szybko, ale powinno działać nawet w starym IE.