div sin hueco interno

eduardobpe · #1 (**permalink**) 28/05/2012, 03:48

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<!doctype html>
<html>
<head>
    <title>Ejemplo con textarea</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="estilo_ejemplo.css">
</head>
<body>
    <div id="contenedor" class="miContenedor">
        <img class="miImagen" src="samsung.png" width="106" heigth="35" alt="Logo Samsung"/>
    </div>
</body>
</html>

Tengo un div que dentro tiene una imagen.

El CSS es el siguiente:

Código CSS:

Ver original* {margin: 0; padding:0}
 
html,body{
    font-size:16px;
}
 
.miContenedor{
    background-color:#FA6262;
    border:5px solid #000000;
}
.miImagen{
    border:1px solid #8DFA62;
}

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?.

kseso? · #2 (**permalink**) 28/05/2012, 03:56

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 ?

eduardobpe · #3 (**permalink**) 28/05/2012, 04:29

Cita:

Iniciado por kseso?

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.miContenedor{
    background-color:#FA6262;
    border:5px solid #000000;
    line-height:0px;
}

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.miImagen{
    border:1px solid #8DFA62;
    margin: 0px;
    display: block;
}