Foros del Web » Creando para Internet » CSS »

div sin hueco interno

Estas en el tema de div sin hueco interno en el foro de CSS en Foros del Web. Hola. Estoy empezando a aprender HTML y CSS y a hacer mis pequeños ejemplos. De momento no tengo demasiada idea, y estoy empezando a leer ...
  #1 (permalink)  
Antiguo 28/05/2012, 03:48
 
Fecha de Ingreso: mayo-2012
Ubicación: La Rioja (España)
Mensajes: 13
Antigüedad: 10 años, 3 meses
Puntos: 0
div sin hueco interno

Hola. Estoy empezando a aprender HTML y CSS y a hacer mis pequeños ejemplos. De momento no tengo demasiada idea, y estoy empezando a leer documentación sobre esto, pero acabo de realizar un pequeño ejemplo en el que me ha surgido una duda. A ver si alguien me puede ayudar.

El código HTML es el siguiente:

Código HTML:
Ver original
  1. <!doctype html>
  2.     <title>Ejemplo con textarea</title>
  3.     <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
  4.     <link rel="stylesheet" type="text/css" href="estilo_ejemplo.css">
  5. </head>
  6.     <div id="contenedor" class="miContenedor">
  7.         <img class="miImagen" src="samsung.png" width="106" heigth="35" alt="Logo Samsung"/>
  8.     </div>
  9. </body>
  10. </html>

Tengo un div que dentro tiene una imagen.

El CSS es el siguiente:

Código CSS:
Ver original
  1. * {margin: 0; padding:0}
  2.  
  3. html,body{
  4.     font-size:16px;
  5. }
  6.  
  7. .miContenedor{
  8.     background-color:#FA6262;
  9.     border:5px solid #000000;
  10. }
  11. .miImagen{
  12.     border:1px solid #8DFA62;
  13. }

Y aquí una captura de imagen de la página web:


Como se ve en la imagen, hay un hueco en la parte inferior de la imagen del logo de samsung, entre el borde verde de ésta y el borde negro del <div>.
¿Cómo puedo quitar este espacio?.
  #2 (permalink)  
Antiguo 28/05/2012, 03:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 2 meses
Puntos: 539
Respuesta: div sin hueco interno

Hola Eduardo:

En la altura de un elemento de bloque que contiene elementos de línea puede verse afectada nó solo por las propiedades de tamaño, márgenes, paddings...
También por las propiedades relativas al texto. Entre otras por line-height, font-size... etc

Sin olvidar los pilares de Css: cascada y herencia (junto a la especificidad que aquí creo que no aplica).
Si quiere una respuesta más concreta a su caso particular, un enlace a esa página estaría bien.


Cita:
Estoy empezando a aprender HTML y CSS y a hacer mis pequeños ejemplos
¿Conoce www.librosweb.es ?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/05/2012, 04:29
 
Fecha de Ingreso: mayo-2012
Ubicación: La Rioja (España)
Mensajes: 13
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: div sin hueco interno

Cita:
Iniciado por kseso? Ver Mensaje
Hola Eduardo:

En la altura de un elemento de bloque que contiene elementos de línea puede verse afectada nó solo por las propiedades de tamaño, márgenes, paddings...
También por las propiedades relativas al texto. Entre otras por line-height, font-size... etc

Sin olvidar los pilares de Css: cascada y herencia (junto a la especificidad que aquí creo que no aplica).
Si quiere una respuesta más concreta a su caso particular, un enlace a esa página estaría bien.



¿Conoce [URL="http://www.librosweb.es"]www.librosweb.es[/URL] ?
Gracias por tu respuesta @kseso.
Sí conozco [URL="http://www.librosweb.es"]www.librosweb.es[/URL]. De hecho es la documentación que estoy empezando a leer.
Únicamente había hecho este ejemplo por curiosidad, y no lo tengo publicado en internet, sólo en local, así que no puedo pasar ninguna URL.

Todo el código que tendría la página es el que he pegado en mi primer mensaje.

Creo que he dado con la solución, no sé si correcta, pero al menos parece que funciona.
Una es con lo que tu decías: en mi archivo .css he añadido a la clase llamada miContenedor la propiedad line-height:0px;
Código CSS:
Ver original
  1. .miContenedor{
  2.     background-color:#FA6262;
  3.     border:5px solid #000000;
  4.     line-height:0px;
  5. }

En lugar de la anterior, otra solución es, añadir en el archivo css la propiedad display:block; en la clase llamada miImagen, que es la clase CSS que tiene asociada la imagen de samsung:
Código CSS:
Ver original
  1. .miImagen{
  2.     border:1px solid #8DFA62;
  3.     margin: 0px;
  4.     display: block;
  5. }
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:41.