Il margin è la distanza che intercorre tra il bordo dell'elemento e gli oggetti esterni. Se tu, ad esempio, assegni ad nu paragrafo un margine superiore di 10px, con "margin-top: 10px;" qualunque oggetto posizionato sopra il paragrafo non si potrà avvicinare oltre quei dieci pixel: è come se creassi uno spazio vuoto di un certo numero di pixel, tutto qui.

Il padding è invece uno spazio che crei all'interno di un contenitore: tra i bordo e il contenuto, sarà lasciato uno spazio vuoto grazie a padding.

Il bordo può essere visualizzato come una cornicettam, grazie alla proprietà border..

leggi nella guida css quando parla di box model, ti creerà anche in futuro ulteriori grattacapi..