no se el porque de este margen, en este div?

00israel · #1 (**permalink**) 15/06/2014, 09:09

Hola a todos. No doy con ello. A ver si alguno me dice algo porque ya estoy bloqueado.

Porque se ve la franja azul que hay por debajo de la imagen roja?:

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>prueba</title>
	<style>
		#contenedor_temas_sinpadding{
			border-top:1px solid black;
			border-bottom:1px solid black;
			height: auto;
			overflow: hidden;
		}
		.img_left{
			width: 60%;
			float: left;
			height: 100%;
			background-color: blue;
		}
		.acordeones{
			width: 100%;
			background-color: red;
		}
	</style>

</head>
<body>
	<div id="contenedor_temas_sinpadding">
		<div class="img_left">
			<img class="acordeones" src="prueba.jpg">
		</div>
	</div>
</body>
</html>

No lo entiendo. Os he puesto un ejemplo muy básico del problema que estoy teniendo. Pero aqui se ve igualmente. En realidad lo que veis de rojo es una imagen que va metida dentro de un div y este a la vez dentro de otro. Mas o menos como ahora.

Pero no entiendo que si le he puesto al div img_left, un height de 100%, no se adapte. ¿no se porque no se adapta al 100% de altura?

alguien puede darme un poco de luz en esta tontería en la que estoy metido.

gracias

00israel · #2 (**permalink**) 15/06/2014, 10:26

mas simple todavía y sigue pasandome:

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>prueba</title>
	<style>

		.img_left{
			background-color: blue;
		}
		img{
			width: 100%;
		}
	</style>

</head>
<body>
	<div class="img_left">
		<img src="prueba.jpg">
	</div>
</body>

</html>

00israel · #3 (**permalink**) 15/06/2014, 11:49

bueno, pues realmente no se porque, pero he conseguido solucionarlo flotando la imagen a la izquierda:

Código HTML:

img{
   width: 100%;
   float: left;
}

pzin · #4 (**permalink**) 15/06/2014, 13:14

Es un problema que tienen los elementos en linea, una imagen por defecto es un elemento en linea. Puedes ponerlo como elemento de bloque:

Código CSS:

Ver original.img_left img {
  display: block;
}

Flotándolo se soluciona porque display es computado en ese caso con el valor block.