Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Margen por arriba en lista

Estas en el tema de Margen por arriba en lista en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2013, 18:34
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 9 meses
Puntos: 6
Margen por arriba en lista

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¡¡¡¡
  #2 (permalink)  
Antiguo 17/03/2013, 02:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Margen por arriba en lista

El caso del margin-top... La verdad es que mucha gente pasa olímpicamente de saber porqué ocurre esto. Siempre se ve en muchas páginas alguna chapucilla para arreglarlo.

El problema es principalmente que el margen superior se colapsa.

Para prevenirlo, hay varias formas diferentes. Añadir padding, bordes, mostrar el elemento como inline-block, etc. Aunque la más limpia en mi opinión es añadir al elemento padre lo siguiente (en tu caso div):

Código CSS:
Ver original
  1. div {
  2.   overflow: auto;
  3. }
  #3 (permalink)  
Antiguo 17/03/2013, 15:36
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 9 meses
Puntos: 6
Respuesta: Margen por arriba en lista

Gracias Bonez, perfecto ahora.

De paso he mirado por la red a ver si entiendo el por qué de los márgenes colapsados, pero mira que es lioso entenderlo. Saludos.
  #4 (permalink)  
Antiguo 17/03/2013, 16:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Margen por arriba en lista

Supuestamente es con intención de facilitar. Pero bueno, ellos sabrán. Lo importante es saber que existe y cómo evitarlo si no se requiere.

Por cierto, viendo que es la segunda vez que lo haces, intenta para otras veces usar highlight —justo encima de donde escribes el mensaje— cuando posteas código, que es más fácil de localizar las cosas.

Etiquetas: arriba, html, lista, margen
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:09.