Il margine superiore all'interno di un div non funziona?

Ho un div che contiene collegamenti (un href). Tutti gli altri margini funzionano con un href ma il margine superiore non funziona con un href. Voglio mettere i collegamenti in mezzo, ma a causa del mancato funzionamento del margine superiore non è possibile. Ho ascoltato impostando la posizione o il display in modo che funzioni. Si prega di suggerire una soluzione cross broswer per questo.Il margine superiore all'interno di un div non funziona?

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; 
}

fonte

2010-10-25 haansi

se si sta cercando di spostare i collegamenti verso il basso all'interno del div, hai provato imbottitura? – Orbit

È necessario spostare l'elemento per rendere il margine funzionante o utilizzare il riempimento.

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; 
}

fonte

2010-10-25 13:36:01

È strano, ma funziona comunque. Funziona normalmente in IE 7. – Tarik

perché dobbiamo rendere mobile l'elemento se vogliamo che 'margin-top' funzioni .. ?? – shashwat

@shashwat Perché è CSS, non cercare un motivo. –

Prova padding-top sul div.Links piuttosto che margin-top sul div.Links a.

fonte

2010-10-25 13:36:34 Brad

L'altezza degli elementi in linea non può essere modificata, è sufficiente utilizzare display:inline-block; sui collegamenti.

fonte

2010-10-25 13:45:09 MatTheCat

** + 1 ** ma il margine non influisce sull'altezza degli elementi e l'altezza sugli elementi in linea può essere modificata. tuttavia 'display: inline-block' è la strada da percorrere. – iConnor

Provare di seguito. Ho aggiunto overflow: hidden alla definizione superiore e display: block e float: left alla definizione inferiore. La prima aggiunta cancella il float che viene aggiunto e gli ultimi due consentono al margine sui collegamenti di funzionare correttamente.

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; 
}

fonte

2010-10-25 13:45:43 ryanulit

uso padding-top: 1px (almeno) per la div.Links e non è necessario utilizzare galleggiante sul div.Links a

fonte

2014-05-20 09:44:57

Il margine superiore all'interno di un div non funziona?

risposta

Problemi correlati