Foros del Web » Creando para Internet » CSS »

margin-top no funciona corrrectamente

Estas en el tema de margin-top no funciona corrrectamente en el foro de CSS en Foros del Web. Hola buen día, Mientras comenzaba un nuevo proyecto, me tope con un problema con la propiedad margin-top que desconózco. Cuando le asigno 15px de margen ...
  #1 (permalink)  
Antiguo 24/08/2011, 18:54
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 5 años, 5 meses
Puntos: 32
margin-top no funciona corrrectamente

Hola buen día,
Mientras comenzaba un nuevo proyecto, me tope con un problema con la propiedad margin-top que desconózco.
Cuando le asigno 15px de margen superior a un div que está dentro de otro div... en vez de moverse el div interno se mueve el div padre, como si le pusiera los 15px de margen superior al div padre.

A continuación dejo el código fuente con éste problema:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:lang="es" lang="es">
  3.  
  4.     <head>
  5.  
  6.         <title>-Prueba-</title>
  7.         <style type="text/css">
  8.             * {
  9.                 margin: 0;
  10.                 padding: 0;
  11.             }
  12.             .botones-ventanas {
  13.                 width: 200px;
  14.                 height:100px;
  15.                 background-color: #333;
  16.             }
  17.             .botones-ventanas .boton {
  18.                 width: 170px;
  19.                 height: 26px;
  20.                 background-color: #ccc;
  21.                 color: #000;
  22.                 /* Muevo .boton 15px de margen superior */
  23.                 margin-top: 15px;
  24.             }
  25.         </style>
  26.  
  27.     </head>
  28.  
  29.     <body>
  30.  
  31.         <div class="botones-ventanas">
  32.             <!-- Debería de moverse .boton hacia abajo no .botones-ventanas ¿Qué sucede? -->
  33.             <div class="boton"></div>
  34.         </div>
  35.  
  36.     </body>
  37.  
  38. </html>

Ejecutenlo para que vean a que me refiero.
Espero y puedan ayudarme, saludos y gracias.

------EDITO------
Tambien sucéde lo mísmo con margin-bottom.

Última edición por IXtremeLT; 24/08/2011 a las 19:07
  #2 (permalink)  
Antiguo 24/08/2011, 22:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: margin-top no funciona corrrectamente

tu problema se conoce como "margenes cerrados" añade overflow:hidden; al contenedor. En este enlacese ve en detalle. Saludos
  #3 (permalink)  
Antiguo 24/08/2011, 22:36
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.580
Antigüedad: 8 años, 9 meses
Puntos: 899
Respuesta: margin-top no funciona corrrectamente

es un clásico ese problema... en lugar de asignar un margen al elemento hijo inmediato asigna padding al padre, es decir:
Código CSS:
Ver original
  1. .botones-ventanas {
  2.                 width: 200px;
  3.                 height:100px;
  4.                 background-color: #333;
  5. padding:15px 0;
  6.             }
  7.             .botones-ventanas .boton {
  8.                 width: 170px;
  9.                 height: 26px;
  10.                 background-color: #ccc;
  11.                 color: #000;
  12.             }

dejo el padding top y bottom porque mencionaste te ocurre lo mismo... no se si exista alguna otra forma de solventar el problema pero de momento es lo que se me viene a la mente
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 25/08/2011, 00:47
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 5 años, 5 meses
Puntos: 32
Respuesta: margin-top no funciona corrrectamente

Gracias a los dos, pero definitivamente cristian_cena me soluciono ese problema, grax!, ahora entiendo que overflow:hidden es una de las cosas principales a tomar en cuenta a la hora de trabajar sobre capas y elementos flotantes, gracias y saludos!

Etiquetas: error_margintop, margintop, problema_margintop
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 19:56.