61
Non sono sicuro di comprendere appieno la differenza tra questi due.CSS: Top vs Margin-top
Qualcuno può spiegare perché utilizzerei l'uno sull'altro e come si differenziano?
A
risposta
56
top è per modificare un elemento con l'utilizzo della proprietà position.
margin-top serve per misurare la distanza esterna dell'elemento, in relazione al precedente.
Inoltre, il comportamento di top può variare a seconda del tipo di posizione, absolute, relative o fixed.
5
dai byte:
"Margine è che lo spazio tra il bordo della finestra di un elemento e il bordo della scatola completo, ad esempio il margine di una lettera 'superiore' sposta limite del margine dell'elemento dal contenitore. casella di blocco, come quello stesso pezzo di carta all'interno di una scatola di cartone, ma non è contro il bordo del contenitore. "
La mia comprensione è che margin-top crea un margine sull'elemento e in alto imposta il bordo superiore dell'elemento sotto il bordo superiore dell'elemento che contiene l'offset.
si può provare qui:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
basta sostituire top con margin-top per vedere la differenza.
65
Si utilizzerà il margine se si desidera spostare un elemento (di blocco) lontano da altri elementi nel flusso del documento. Ciò significa che sposterà i seguenti elementi/più in basso. Essere consapevoli del fatto che i margini verticali degli elementi adiacenti crollano.
Se si voleva l'elemento da non avere alcun effetto sugli elementi circostanti, utilizza il posizionamento (ass., Rel.) E le impostazioni top, bottom, left e right.
Con il posizionamento relative, l'elemento occuperà ancora il suo spazio originale come quando posizionato staticamente. Ecco perché non succede nulla, se passi dalla posizione static a relative. Da lì, puoi spingerlo attraverso gli elementi circostanti.
Con il posizionamento absolute, si rimuove completamente l'elemento dal flusso di documenti (statici), in modo da liberare lo spazio occupato. È quindi possibile posizionarlo liberamente, ma lo relativo al successivo elemento posizionato in modo non statico avvolto attorno ad esso. Se non ce n'è, sarà ancorato a tutta la pagina.
6
Il margine si applica e estende/contrae il contorno normale dell'elemento ma quando si chiama in alto si ignora la posizione regolare dell'elemento e lo si sposta in una posizione specifica.
Esempio:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
significa che l'elemento inizierà a visualizzare html all'altezza 50% del suo contenitore (cioè il div visualizzando la parola il "contenuto" verrebbe visualizzato al 50% dell'altezza del suo nodo div o html contenente direttamente prima di div # some_element) ma se si apre l'ispettore del browser (f12 su Windows o cmd + alt + i su mac) e passa il mouse sopra l'elemento vedrai i suoi bordi evidenziati e noterai che l'elemento è stato spostato verso il basso piuttosto che riposizionato.
Top dall'altro:
#some_element {top: 50%}
effettivamente riposizionare l'elemento che significa che visualizzerà ancora al 50% del suo contenitore ma sarà riposizionare l'elemento in modo suo bordo inizia al 50% del suo elemento contenente . In altre parole, ci sarà uno spazio tra i bordi dell'elemento e il suo contenitore.
Cheers!
2
Il top proprietà è una posizione proprietà. Viene utilizzato con la proprietà position, ad esempio absolute o relative. margin-top è una proprietà di un elemento.