Problemas con padding

[bielins]

Hola! estoy aprendiendo css y tengo algunos problemas con la propiedad padding...

yo tengo un div de width 100px con una imagen de fondo de 100px de ancho exactamente, lo que quiero es que el texto de dentro este separado de los margenes 5px y pongo:

padding-top:17px;
padding-left:5px;

pero entonces lo que hace es hacerme mas grande el div de manera que desencaja todo!

lo estoy haciendo bien? que solucion hay?

gracias!

[jomaruro]

Hola:

Quizá cuando te leas este artículo comprendas el porqué te ocurre eso.

Saludos.

[bielins]

la verdad es que sigo sin entenderlo muy bien... no encuentro que es lo que hago mal..

cuando le añado pixeles a el padding no se los estoy quitando a el div o caja?

podrias mas o menos decirme que es lo que esta mal?

[jomaruro]

Hola:

Por ejemplo:

Código CSS:

div {
  width: 300px;
  padding-left:  50px;
  padding-right: 50px;
  margin-left:   30px;
  margin-right:  30px;
  border: 10px solid black;
}
 

Este div tiene un ancho de 300px, un padding (left y right) de 50px, un margin (left y right) de 30px y un borde de 10px.

¿Cuando mide el div?

Pues es sencillo: margin-left+border+padding-left+width+padding-right+border+margin-left.

30+10+50+300+50+10+30 = 480px.

Espero que lo hayas entendido, si no es así vuelve a preguntar.

Saludos.

[bielins]

a vale vale, muchas gracias! esque pensaba que el padding se utilizaba deel width y no que se sumaba...

gracias de nuevo!