De donde sale este padding ?

Vunarok · #1 (**permalink**) 15/12/2011, 15:00

Hola,

Estoy enpezando aprender css y estaba intentando hacer algo para practicar pero me da un problema, miren la imagen:

No tengo ni idea porque, a mi elemento de la lista se le esta agreagano ese padding en la parte de abajo, por mas que intente no pude quitarselo y no se que es lo que lo esta causando. Aqui esta el codigo por si alguien quiere revisarlo y ver si lo puede quitarme y decirme porque es que aparece:

Código:

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
    
    <title></title>
    
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="main.css" />
</head>
<body>
	<div id="wrap">
    	<ol class="specials">
        	<li>
                    <a href="#">
                        <img src="ropes.jpg" alt="ropes" />
                        <span>
                            <strong>Boathouse Bold</strong>
                            <em>$12.50 / 1b</em>
                        </span>
                    </a>
            </li>
        </ol>
    </div>
</body>
</html>

Código:

ol.specials img {
	width: 100%;
}

ol.specials a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	text-decoration: none;
	color: #ccc;
}

ol.specials li {
	background: red;
	width: 150px;
	border: 15px solid #e2e1d4;
	border-radius: 8px;
	position: relative;
}

ol.specials span {
	background: rgba(0,0,0,.5);
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
}


ol.specials span strong {
	color: #fff;
	display: block;
	font-weight: normal;
	padding: 10px 10px 0 10px;
}

ol.specials span em {
	display: block;
	padding: 0 10px 10px 10px;
	color: #e3c887;
}

Por cierto si se preguntan porque use una lista, es porque se supone que son varios elementos, varios especiales o como los quieran llamar, pero yo solo he usado uno porque es para practicar. Otra cosa, estoy agregando el borde al elemento li, pero estara bien asi o sera mejor insertar el contenido del elemento li a un div y ahi agrgarle el borde al div, etc ?

Gracias

emprear · #2 (**permalink**) 15/12/2011, 23:13

Ese que tenés es un problema bastante raro, hasta de explicar, nunca encontré una documentación muy precisa al respecto.
Te voy a ejemplificar el problema y la solución (al meno una de las posibles), pero en tu caso de tu código en particular, la solución tendrás que buscarla vos, dado de que tu código involucra otros elementos y es bastante más complejo.

para quelo visualices mejor voy a limitarme a 2 etiquetas, div e img, y como un comentario adicional, pero no menos importante, te aclaro que si usas un doctype xhtm transitional, el inconveniente sencillamente no se produce.

El tema es asi, cuando ponés una imagen dentor de un div, y al div le das ó un color de fondo, o un borde, vas a notar que aparece un pequeño padding en la parte inferior del div. Sin importar cuantos resets le apliques, el padding sigue apareciendo

ejemplo 1 - no se produce el problema

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema, aqui no se produce prque usamos xtml transitional</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

Ejemplo 2, con strict, se produce

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

con html5, también se produce

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema, tembién en html5</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

para que no queden dudas atodas les hice un

Código CSS:

Ver original*{
padding: 0;
margin: 0;
border: none;
}

Ahora, en tu caso, pensé que se le podria dar un Doctype Transitional a tu documento, pero aún as el problema aparece,
Como ves, es bastante extraño e imprevisible. Y se dá en Firefox, IE, Chrome, Opera, hasta dónde pude probar

Saludos

alexk · #3 (**permalink**) 15/12/2011, 23:58

No es ningun padding, recordemos que <img> es un elemento en linea, por lo tanto hereda el "line-height", una "solución" al problema seria lo siguiente:

Código:

ol.specials li {
	background: red;
	width: 150px;
	border: 15px solid #e2e1d4;
	border-radius: 8px;
	position: relative;
	line-height:0;	/*quitamos el line-height*/
}
ol.specials span {
	background: rgba(0,0,0,.5);
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	line-height:normal;/*aplicamos line-height al texto*/
}

Aun que claro, yo prefiero usar medidas fijas en esos casos, tanto width, como height.

Vunarok · #4 (**permalink**) 16/12/2011, 01:09

@alexk se soluciono al cambiar el line-height :)

@emprear tienes razon si uso el DOCTYPE de xhtml y elimino el estilo de la lista problema arreglado pero cuando vuelvo al DOCTYPE de html5 me vuelve el problema.

Alguien tiene idea de porque con el DOCTYPE de html5 sucede esto ?