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