Div extraña , me deja mas espacio en el fondo del normal

[tonnot]

En esta div, quiero meter una imagen . Como veis quiero un padding de 2 pixeles para 'emarcarla'. Bueno, no se que pasa, pero me deja 4 pixeles de padding en el bottom. Porque ?

.div_info_1_c2 {
float: right;
width: auto;
margin-right: 20px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
display: block;
padding: 2px;
height: auto;
}
Muchas gracias (y gracias en general al foro ...)

[jomaruro]

Hola:

En principio el código está bien, salvo que deberías resumirlo.

Código CSS:

.div_info_1_c2 {
float: right;
width: auto;
margin-right: 20px;
border: 1px solid #666;
display: block;
padding: 2px;
height: auto;
}
 

Léete este capítulo sobre shorthand.

Saludos.

[tonnot]

Y si pones una imagen te queda centrada con los bordes o en la parte inferior hay más espacio (2 pixeles mas de lo normal)
???

[stingofung]

Saludos "tonnot",

¿Puedes postear el código HTML para ver como lo estas haciendo y de esta manera poder ayudarte?

[MRB09]

y si en vez de usar class usas id con un "#" en vez de "."?

[jomaruro]

Hola:

Iniciado por MRB09

y si en vez de usar class usas id con un "#" en vez de "."?

¿Y cuál es la diferencia?

Saludos.

[Kanashin]

Iniciado por jomaruro

Hola:



¿Y cuál es la diferencia?

Saludos.

En HTML sólo puede haber un ID en concreto pero muchos CLASS; útil para estar seguro que un elemento aparecerá sólo una vez.

[jomaruro]

Hola:

Iniciado por Kanashin

En HTML sólo puede haber un ID en concreto pero muchos CLASS; útil para estar seguro que un elemento aparecerá sólo una vez.

Eso ya lo sé, me refería a la diferencia entre uno y otro para resolver el problema. No entendiste la ironía.

Saludos.

[Kurozaki]

creo que el problema de nuestro compañero se debe a:

Pistas:
-Usa class (quiere decir que tiene varios div con imagenes y las mismas propiedades)
-Padding 4px (un div abajo de otro sumarian 4px de padding)

Entonces si es así, puedes usar un margin en el top y bottom:

padding:0 2px;
margin:2px 0;

asi, el margin de 2px, al estar un div debajo de otro, tendran una distancia de 2px y no de 4px.

ya que el padding suma 4px por:
2px del bottom y 2px del top (del div de abajo)

p.d: no se si me explique >.<

[ArturoGallegos]

como ya dijo el compañero jomaruro usa las propiedades compactas ñ.ñ y a estas sumale un margin:0; para la imagen quedando tu css así:

Código CSS:

.div_info_1_c2 {
float: right;
width: auto;
margin-right: 20px;
border: 1px solid #666;
display: block;
padding: 2px;
height: auto;
}
.div_info_1_c2 img{margin:0;padding:0;}
 

pregunta: si solo quieres agregar un marco porque no agregas la clase sobre la imagen? en lugar de agregar

<div class="div_info_1_c2"><img src="" alt="" /></div>

podrías usar <img class="marco" src="" alt="" />

y en tu css
.marco{
margin:0;
padding:2px;
border: 1px solid #666;
}