Saya tidak yakin apakah saya sepenuhnya memahami perbedaan antara keduanya.
Adakah yang bisa menjelaskan mengapa saya menggunakan salah satu dari yang lain dan bagaimana perbedaannya?
Jawaban:
topadalah untuk men-tweak elemen dengan menggunakan positionproperti.
margin-topadalah untuk mengukur jarak eksternal ke elemen, dalam kaitannya dengan elemen sebelumnya.
Selain itu, topperilaku dapat berbeda bergantung pada jenis posisi absolute,, relativeatau fixed.
Anda akan menggunakan margin, jika Anda ingin memindahkan elemen (blok) dari elemen lain dalam alur dokumen. Itu berarti akan mendorong elemen-elemen berikut menjauh / lebih jauh ke bawah. Ketahuilah bahwa margin vertikal dari elemen blok yang berdekatan runtuh.
Jika Anda ingin elemen yang tidak berpengaruh pada elemen sekitarnya, Anda akan menggunakan posisi (abs., Rel.) Dan top, bottom, leftdanright pengaturan.
Dengan relativepositioning, elemen akan tetap menempati ruang aslinya seperti saat diposisikan secara statis. Itulah mengapa tidak ada yang terjadi, jika Anda beralih dari satu posisi staticke relativeposisi lain. Dari sana, Anda kemudian dapat mendorongnya ke elemen sekitarnya.
Dengan absolutepemosisian, Anda benar-benar menghapus elemen dari aliran dokumen (statis), sehingga akan membebaskan ruang yang ditempati. Anda kemudian dapat memposisikannya dengan bebas - tetapi relatif terhadap elemen yang diposisikan secara non-statis terbaik berikutnya yang membungkusnya. Jika tidak ada, itu akan ditambatkan ke seluruh halaman.
Margin menerapkan dan memperpanjang / mengontrak batas normal elemen tetapi ketika Anda memanggil atas, Anda mengabaikan posisi reguler elemen dan mengapungkannya ke posisi tertentu.
Contoh:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
Berarti elemen akan mulai menampilkan html pada ketinggian 50% dari penampungnya (yaitu div yang menampilkan kata "konten" akan ditampilkan pada ketinggian 50% dari simpul div atau html yang berisi langsung sebelum div # some_element) tetapi jika Anda membuka inspektur browser (f12 di Windows atau cmd + alt + i di mac) dan arahkan mouse ke elemen, Anda akan melihat batasnya disorot dan memperhatikan bahwa elemen tersebut telah didorong ke bawah daripada diposisikan ulang.
Atas di sisi lain:
#some_element {top: 50%}
Akan benar-benar memposisikan ulang elemen yang berarti itu masih akan ditampilkan pada 50% dari wadahnya tetapi itu akan memposisikan ulang elemen sehingga tepinya dimulai pada 50% dari elemen yang memuatnya. Dengan kata lain, akan ada celah antara tepi elemen dan wadahnya.
Bersulang!
dari byte:
"Margin adalah jarak antara tepi kotak elemen dan tepi kotak lengkap, seperti margin huruf. 'Atas' menggantikan tepi margin elemen dari kotak blok yang berisi, seperti selembar kertas yang sama di dalamnya kotak kardus, tetapi tidak menyentuh tepi wadah. "
Pemahaman saya adalah bahwa margin-top membuat margin pada elemen, dan atas mengatur tepi atas elemen di bawah tepi atas elemen yang mengandung di offset.
Anda bisa mencobanya di sini:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
ganti saja atas dengan margin-top untuk melihat perbedaannya.