Superiore e sinistro vs margine superiore e marginale sinistro

Question

Qual è la differenza tra l'utilizzo delle proprietà superiore e sinistra e i margini superiore e sinistro?

So che l'alto e il sinistro sono generalmente usati in posizione: situazione assoluta, ma mi chiedo ancora se c'è una grande differenza.

es:

position:absolute; 
top:5px; 
left:5px; 

-confrontarli-

margin-top:5px; 
margin-left:5px; 

Answer 1

Bene, la differenza principale è che gli elementi posizionati in modo assoluto vengono estratti dal flusso di contenuti.

Ma anche con elementi relativamente posizionati, il contenuto circostante può essere offuscato.

I margini vengono invece aggiunti alle dimensioni dell'elemento mentre il contenuto circostante scorre di conseguenza.

Vedere this sample fiddle con alcune differenze.

Sicuramente ci sono situazioni in cui entrambi forniscono gli stessi risultati, ma in condizioni normali, questi due approcci non sono semplicemente intercambiabili né confrontabili.

Answer 2

Margine descrive lo spazio tra la scatola e scatole adiacenti. Le scatole che sono posizionate relativamente (cioè che fanno parte del flusso normale) manterranno lo spazio sufficiente tra loro per soddisfare i requisiti di "margine" di ognuno (chiamato "collasso dei margini").

top e left d'altra parte sono posizionali attributi che specificano dove si trova tua casella; per le scatole posizionate in modo assoluto i valori sono presi rispetto alla scatola di contenimento più vicina che è a sua volta posizionata in modo assoluto. Gli attributi in alto/a sinistra/in basso/a destra specificano la posizione del rispettivo bordo della scatola, compreso il suo margine.

In breve, i due concetti sono completamente diversi. Per le scatole con flusso normale, è necessario utilizzare margin per controllare la spaziatura tra caselle adiacenti.

Answer 3

A C'è una differenza semantica. Gli offset casella come top specificano fino a che punto il bordo margine di una casella (i bordi tratteggiati nell'immagine seguente) è sfalsato rispetto a un bordo di riferimento (per gli elementi posizionati in modo assoluto, quello è il bordo superiore del blocco contenitore della scatola). Le proprietà dei margini come margin-top specificano la larghezza dell'area del margine di una casella (La distanza TM tra il bordo tratteggiato e il bordo solido nell'immagine seguente).

Btop e left applicano solo a elementi posizionati (elementi con position impostato su un valore diverso static) mentre margin-top e margin-left applicare a tutti gli elementi eccetto gli elementi con tipi di visualizzazione tabella diversi da tavolo-caption , tavolo e tabella in linea.