Perbedaan Padding dan Margin dan cara penulisannya

Padding dan Margin sama-sama berfungsi untuk mengatur jarak

padding : jarak antara child terhadap parent
misalnya di dalam ruangan kelas ada meja dan kursi maka jarak antara meja dan kursi terhadap dinding kelas maka itulah padding

margin : jarak antara child terhadap child atau parent terhadap parent
misalnya jarak antara ruangan kelas A dan kelas B (ruangannya berbeda)

penulisan :
padding-top: 20px
padding-right: 30px
padding-bottom: 40px
padding-left: 50px

di atas juga bisa dituliskan seperti ini
padding: 20px30px40px50px

arah perputaran jarum jam

atau misalnya padding kiri sama dengan kanan maka'
paddding:10px20px30px
untuk ini kiri kanan akan sama dengan 20px

padding: 20px 40px
untuk ini atas = bawah =20px sedangkan kanan = kiri =40px

padding: 20px (artinya semua arah sama nilai jaraknya)