Hola, a ver si alguien me puede ayudar¡ Me tienen loca los comportamientos a veces extraños de los márgenes, a veces crees que puedes poner un margen y le das una distancia, y te sale, y de repente, mueves algo, y ya no te sale.
En este caso me gustaria poner una lista en una caja div, pero el primer elemento de la lista me sale muy pegado al borde de arriba de la caja, le doy con "margin" márgenes por arriba pero nada, no me hace caso, ahí se queda pegado, pero por los lados o abajo si responde al "margin", no sé porque se comporta así. ¿alguién sabe?
Por otro lado, ya que estamos, me gustaria saber como hacer que las viñetas redondas de cada <li> entren dentro de su caja. Gracias¡¡¡¡
Aquí dejo el lio:
HTML:
<!DOCTYPE HTML>
<html lang="es" dir="ltr">
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
</head>
<body>
<section id="contenedor">CONTENEDOR
<section id="contenido">CONTENIDO
<div>
<ul>
<li>xxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxx</li>
<li>xxxxxxxxxxx</li>
</ul>
</div>
</section>
</section>
</body>
</html>
CSS:
/*Reseteo Universal*/
*{
border: 0;
margin: 0;
padding: 0;
}
header,footer,section,article,hgroup,{
display: block;
}
/*Estilos*/
body {
background: cyan;
}
div {
background: red;
height: 400px;
margin: 10px;
}
ul {
background: blue;
height:300px;
margin: 10px;
}
li {
background: orange;
height:50px;
margin: 10px;
}
#contenedor {
background: yellow;
height: 600px;
margin:50px;
}
#contenido {
background: pink;
height: 500px;
margin:50px;
}
Gracias¡¡¡¡