CSS: massimo vs margine superiore

Non sono sicuro di aver compreso appieno la differenza tra questi due.

Qualcuno può spiegare perché dovrei usarne uno sull'altro e come differiscono?

topserve per modificare un elemento con l'uso della positionproprietà.
margin-topserve per misurare la distanza esterna dall'elemento, rispetto al precedente.

Inoltre, il topcomportamento può variare a seconda del tipo di posizione absolute, relativeo fixed.

Utilizzeresti margin, se volessi spostare un elemento (blocco) lontano da altri elementi nel flusso del documento. Ciò significa che spingerebbe i seguenti elementi lontano / più in basso. Tenere presente che i margini verticali degli elementi di blocco adiacenti collassano.

Se si voleva l'elemento da non avere alcun effetto sugli elementi circostanti, utilizza il posizionamento (ass., Rel.) Ed i top, bottom, lefte le rightimpostazioni.

Con il relativeposizionamento, l'elemento occuperà ancora il suo spazio originale come se fosse posizionato staticamente. Ecco perché non succede nulla, se passi da statica relativeposizione. Da lì, puoi quindi spingerlo attraverso gli elementi circostanti.

Con il absoluteposizionamento si rimuove completamente l'elemento dal flusso di documenti (statico), liberando così lo spazio che occupava. È quindi possibile posizionarlo liberamente, ma rispetto al successivo elemento migliore posizionato non staticamente avvolto attorno ad esso. Se non ce n'è, verrà ancorato a tutta la pagina.

Il margine applica ed estende / contrae il limite normale dell'elemento, ma quando chiami top ignori la posizione regolare dell'elemento e la fluttua 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 del 50% del suo contenitore (cioè il div che mostra la parola "contenuto" verrebbe visualizzato all'altezza del 50% del suo div o nodo html che lo contiene direttamente prima del div # some_element) ma se apri il tuo l'ispettore del browser (f12 su Windows o cmd + alt + i su mac) e passa il mouse sull'elemento vedrai i suoi confini evidenziati e noterai che l'elemento è stato spinto verso il basso anziché riposizionato.

In alto d'altra parte:

#some_element {top: 50%}

In realtà riposizionerà l'elemento, il che significa che verrà comunque visualizzato al 50% del suo contenitore ma riposizionerà l'elemento in modo che il suo bordo inizi al 50% del suo elemento contenitore. In altre parole, ci sarà uno spazio tra i bordi dell'elemento e il suo contenitore.

Saluti!

La topproprietà è una proprietà di posizione. Viene utilizzato con la positionproprietà, ad esempio absoluteo relative. margin-topè la proprietà di un elemento.

da byte:

"Il margine è lo spazio tra il bordo del riquadro di un elemento e il bordo del riquadro completo, ad esempio il margine di una lettera." Top "sposta il bordo del margine dell'elemento dal riquadro dei blocchi contenitore, come lo stesso pezzo di carta all'interno una scatola di cartone, ma non contro il bordo del contenitore. "

La mia comprensione è che margin-top crea un margine sull'elemento e top imposta il bordo superiore dell'elemento sotto il bordo superiore dell'elemento contenitore all'offset.

puoi provarlo qui:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

basta sostituire top con margin-top per vedere la differenza.