Que el div no se agrande con el padding

principianteZF · #1 (**permalink**) 22/01/2010, 06:42

Hola amigos, no tengo mucha experiencia en css, estoy haciendo pruebas para hacer un trabajo y quisiera que en el ejemplo el padding que le agregue no agrande el div.

Código:

<style type="text/css">
#paddmar{width:200px; height:200px; background-color:#FF9900; padding:0px; margin:0px; }
#dentro{width:100px; height:100px; background-color:#aC66ff; padding:0px; margin:0px;}
.letra{font-family:Verdana; font-size:12px; color:#666666;}
</style>
</head>

<body>
<div id="paddmar"> <div id="dentro"><p class="letra">Esto es una prueba uno, dos, tres, probando.</p></div></div>

Ejemplo, yo quiero que si le agrego padding al div "dentro", este no se agrande, o sea siga teniendo 100 px de ancho y largo.
Como se puede lograr esto?

Impostor · #2 (**permalink**) 22/01/2010, 06:45

Buenassss,

piensa que el ancho de un diva van a ser la suma de los dos margenes laterales, mas la de los padding mas el ancho definido, hasta donde yo conozco, el añadir padding a un elemento, de forma inevitable va a hacer que este crezca.

Saludos¡¡

masterojitos · #3 (**permalink**) 22/01/2010, 06:49

te comento que en si no agranda el div, sino que lo empuja si se puede decir asi, lo que hace que el div se mueva, o como dices, cresca.....

principianteZF · #4 (**permalink**) 22/01/2010, 07:09

Ya veo, gracias.

Asi que a la hora de calcular el ancho de un div debemos sumarle los margin y los padding, siempre?
Esta es la duda que tengo, espero vuestra generosa respuesta, gracias.

Impostor · #5 (**permalink**) 22/01/2010, 07:21

Tu mismo te has respondido, mira este articulo, que es bastante esclarecedor al respecto.

Saludos¡¡