¿El margen superior dentro de un div no funciona?

Tengo un div que contiene enlaces (a href). Todos los demás márgenes están trabajando con un href pero el margen superior no funciona con un href. Quiero colocar enlaces en el medio, pero debido a que no funciona en el margen superior, no es posible. Llamé al establecer la posición o mostrar que puede funcionar. Por favor, sugiera una solución cruzada para ello.¿El margen superior dentro de un div no funciona?

div.MainContainer div.Links 
{ 
    height: 57px; 
    width: 100%; 
    border-top: solid 0px #404040; 
    border-left: solid 2px #404040; 
    border-right: solid 2px #404040; 
    border-bottom: solid 2px #404040; 
    background-image: url("../Images/links_background.png"); 
} 
div.MainContainer div.Links a 
{ 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
}

Fuente

2010-10-25 haansi

si usted está tratando de mover los enlaces abajo dentro del div, ¿ha intentado el relleno? – Orbit

Necesita flotar el elemento para que el margen funcione o use relleno en su lugar.

div.MainContainer div.Links a 
{ 
    float: left; 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
}

Fuente

2010-10-25 13:36:01

Es extraño, pero está funcionando aunque. Funciona en IE 7 normalmente. – Tarik

¿Por qué tenemos que flotar el elemento si queremos que 'margin-top' funcione? – shashwat

@shashwat Como es CSS, no busques por una razón. –

Trate padding-top en el lugar de div.Linksmargin-top en el div.Links a.

Fuente

2010-10-25 13:36:34 Brad

La altura de los elementos en línea no se puede cambiar, solo use display:inline-block; en sus enlaces.

Fuente

2010-10-25 13:45:09 MatTheCat

** + 1 ** pero, el margen no afecta la altura de los elementos, y la altura de los elementos en línea se puede cambiar. sin embargo 'display: inline-block' es el camino a seguir. – iConnor

Pruebe a continuación. Agregué overflow: hidden a la definición superior y display: block y float: left a la definición inferior. La primera adición borra el flotador que se agrega, y los dos últimos permiten que el margen en los enlaces funcione correctamente.

div.MainContainer div.Links 
{ 
    height: 57px; 
    width: 100%; 
    border-top: solid 0px #404040; 
    border-left: solid 2px #404040; 
    border-right: solid 2px #404040; 
    border-bottom: solid 2px #404040; 
    background-image: url("../Images/links_background.png"); 
    overflow: hidden; 
} 
div.MainContainer div.Links a 
{ 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
    display: block; 
    float: left; 
}

Fuente

2010-10-25 13:45:43 ryanulit

uso padding-top: 1px (al menos) para el div.Links y que no es necesario utilizar flotador en el div.Links a

Fuente

2014-05-20 09:44:57

¿El margen superior dentro de un div no funciona?

Respuesta

Cuestiones relacionadas