Perbedaan antara margin dan padding?

Apa sebenarnya perbedaan antara margin dan padding di CSS? Tampaknya itu tidak melayani banyak tujuan. Bisakah Anda memberi saya contoh di mana letak perbedaannya (dan mengapa penting untuk mengetahui perbedaannya)?

paddingadalah ruang antara konten dan border, sedangkan marginruang di luar perbatasan. Inilah gambar yang saya temukan dari pencarian cepat Google, yang menggambarkan ide ini.

Satu hal penting yang hilang dalam jawaban di sini:

Margin Atas / Bawah dapat dilipat.

Jadi jika Anda memiliki margin 20px di bagian bawah elemen dan margin 30px di bagian atas elemen berikutnya, margin antara dua elemen akan 30px daripada 50px. Ini tidak berlaku untuk margin atau bantalan kiri / kanan.

Margin diterapkan pada elemen luar Anda sehingga mempengaruhi seberapa jauh elemen Anda jauh dari elemen lain.

Padding diterapkan ke bagian dalam elemen Anda sehingga mempengaruhi seberapa jauh konten elemen Anda jauh dari perbatasan.

Selain itu, menggunakan margin tidak akan memengaruhi dimensi elemen Anda sedangkan padding akan membuat dimensi elemen Anda (set height + padding) jadi misalnya jika Anda memiliki div 100x100px dengan padding 5 px, div Anda sebenarnya akan menjadi 105x105px

Ingat 3 poin ini:

• Margin adalah ruang ekstra di sekitar kontrol.
• Padding adalah ruang ekstra di dalam kontrol.
• Padding dari kontrol luar adalah Margin dari kontrol dalam .

Gambar Demo: (di mana kotak merah mengendalikan keinginan)

Defenisi yang paling sederhana adalah; padding adalah ruang yang diberikan di dalam batas elemen wadah dan margin diberikan di luar. Untuk elemen yang bukan wadah, padding mungkin tidak masuk akal, tetapi margin dengan pasti akan membantu mengaturnya.

Padding adalah ruang di dalam perbatasan, sedangkan Margin adalah ruang di luar perbatasan.

Lapisan

Padding adalah properti CSS yang mendefinisikan ruang antara konten elemen dan perbatasannya (jika memiliki perbatasan). Jika sebuah elemen memiliki perbatasan di sekitarnya, lapisan akan memberikan ruang dari perbatasan itu ke konten elemen yang muncul di perbatasan itu. Jika suatu elemen tidak memiliki perbatasan di sekitarnya, maka menambahkan padding tidak berpengaruh sama sekali pada elemen itu, karena tidak ada perbatasan untuk memberi ruang dari.

Batas

Margin adalah properti CSS yang mendefinisikan ruang di luar elemen ke elemen luar berikutnya.

Margin mempengaruhi elemen yang keduanya memiliki atau tidak memiliki batas. Jika suatu elemen memiliki perbatasan, margin mendefinisikan ruang dari perbatasan ini ke elemen luar berikutnya. Jika suatu elemen tidak memiliki perbatasan, maka margin mendefinisikan ruang dari konten elemen ke elemen luar berikutnya.

Perbedaan Antara Padding dan Margin

Jadi perbedaan antara margin dan padding adalah bahwa sementara penawaran padding dengan ruang dalam, margin berurusan dengan ruang luar ke elemen luar berikutnya.

Salah satu perbedaan utama antara margin dan padding tidak disebutkan dalam salah satu jawaban: clickability dan deteksi hover

Meningkatkan bantalan meningkatkan ukuran elemen yang efektif. Kadang-kadang saya memiliki ikon bertubuh kecil yang saya tidak ingin membuatnya tampak lebih besar tetapi pengguna masih perlu berinteraksi dengan ikon itu. Saya menambah lapisan ikon untuk memberinya jejak yang lebih besar untuk klik dan melayang. Meningkatkan margin ikon tidak akan memiliki efek yang sama.

Sebuah jawaban untuk pertanyaan lain tentang topik ini memberikan contoh.

margin = spasi di sekitar (di luar) elemen dari perbatasan ke luar.

padding = spasi di sekitar (di dalam) elemen dari teks ke perbatasan.

lihat di sini: http://jsfiddle.net/robx/GaMpq/

Adalah baik untuk mengetahui perbedaan antara margindan padding. Setahu saya:

• Margin adalah ruang luar elemen, sedangkan padding adalah ruang bagian dalam elemen. Dengan kata lain, margin adalah ruang di luar batas elemen, sedangkan padding adalah ruang di dalam perbatasannya.
• Anda dapat mengatur autonilai ke margin. Namun, itu tidak diperbolehkan untuk bantalan. Lihat ini .
  Catatan: Gunakan margin: autountuk memusatkan elemen blok di dalam induknya secara horizontal. Selain itu, dimungkinkan untuk memusatkan elemen di dalam flexbox secara vertikal atau horizontal atau keduanya, dengan mengatur margin ke otomatis. Lihat ini .
• Margin dapat berupa angka float, tetapi padding tidak boleh negatif.
• Saat Anda mendesain elemen, padding juga akan ditata; tapi bukan margin. Margin mendapatkan gaya elemen induk. Misalnya, ketika Anda mengatur background-colorproperti menjadi hitam, ruang dalamnya (yaitu padding) akan menjadi hitam, tetapi tidak ruang luarnya (yaitu margin).

Batas adalah ruang di luar kotak; padding adalah ruang di dalam kotak. Sulit untuk melihat perbedaannya dengan isian putih, tetapi dengan isian berwarna Anda dapat melihatnya dengan baik.

Margin dan padding adalah kedua jenis padding benar-benar .... Satu (margin) pergi di luar batas elemen untuk menjauhkannya dari elemen lain dan yang lain (padding) pergi di luar konten elemen untuk menjauhkan konten dari perbatasan elemen.

Padding memungkinkan pengembang untuk menjaga ruang antara teks dan elemen penutupnya. Margin adalah ruang yang dipertahankan elemen dengan elemen lain dari induk DOM.

Lihat contoh:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Margin adalah properti di CSS yang digunakan untuk membuat spasi di sekitar elemen, di luar perbatasan. Programmer dapat mengatur margin untuk atas, kanan, bawah dan kiri. Dengan kata lain, ia dapat mengatur nilai-nilai tersebut menggunakan margin-top, margin-kanan, margin-bottom dan margin-kiri.

Nilai- nilai Margin bisa dari jenis berikut.

Pertama, otomatis memungkinkan browser untuk menghitung margin. Selain itu, panjang menunjukkan margin dalam px, pt atau cm, sedangkan% membantu menggambarkan margin sebagai persentase relatif terhadap lebar elemen yang mengandung. Akhirnya, inherit menunjukkan bahwa margin harus diwarisi dari elemen induk.

Padding adalah properti di CSS yang membantu menciptakan ruang di sekitar elemen di dalam perbatasan. Programmer dapat mengatur padding untuk atas, kanan, bawah dan kiri. Dengan kata lain, ia dapat mengatur nilai-nilai tersebut menggunakan padding-top, padding-right, padding-bottom dan padding-left.

Nilai Padding bisa dari tipe berikut.

Panjang menggambarkan padding dalam px, pt atau cm, sedangkan% menunjukkan padding sebagai persentase relatif terhadap lebar elemen yang mengandung. Akhirnya, inherit menjelaskan bahwa padding harus diwarisi dari elemen induk.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Perbedaan Antara Margin dan Padding

Margin adalah properti CSS yang digunakan untuk membuat ruang di sekitar elemen di luar batas yang ditentukan, sedangkan padding adalah properti CSS yang digunakan untuk membuat ruang di sekitar elemen, di dalam batas yang ditentukan. Jadi, ini menjelaskan perbedaan utama antara margin dan padding.

Nilai Selanjutnya, nilai margin bisa otomatis, panjang,% atau mewarisi, sedangkan nilai padding bisa panjang,% atau tipe mewarisi. Oleh karena itu, ini adalah perbedaan lain antara margin dan bantalan.

Secara singkat, margin dan padding adalah dua properti dalam CSS yang memungkinkan untuk menata halaman web. Tidak mungkin untuk menetapkan nilai negatif untuk properti tersebut. Perbedaan utama antara margin dan padding adalah margin membantu menciptakan ruang di sekitar elemen di luar perbatasan, sementara padding membantu menciptakan ruang di sekitar elemen di dalam perbatasan.

Coba letakkan warna latar pada blok div dengan lebar dan tinggi. Anda akan melihat bahwa padding meningkatkan ukuran elemen, sedangkan margin hanya memindahkannya dalam aliran dokumen.

Margin khusus untuk menggeser elemen di sekitar.

Padding adalah ruang antara komponen terdekat pada halaman web dan margin adalah ruang dari margin halaman web.

Satu hal yang saya perhatikan tetapi tidak ada jawaban di atas yang disebutkan. Jika saya memiliki elemen DOM yang dibuat secara dinamis yang diinisialisasi dengan konten html bagian dalam yang kosong, itu adalah praktik yang baik untuk menggunakan margin daripada padding jika Anda tidak ingin elemen kosong ini menempati ruang apa pun kecuali kontennya dibuat.

Ada satu perbedaan penting:

Margin- ada di bagian luar elemen yaitu seseorang akan menerapkan pergeseran spasi putih "setelah" elemen dimulai. Padding- ada di bagian dalam, yang lain akan menerapkan spasi putih "sebelum" elemen dimulai.

Margin diterapkan pada elemen luar Anda sehingga mempengaruhi seberapa jauh elemen Anda jauh dari elemen lain.

Padding diterapkan ke bagian dalam elemen Anda sehingga mempengaruhi seberapa jauh konten elemen Anda jauh dari perbatasan.

Selain itu, menggunakan margin tidak akan memengaruhi dimensi elemen Anda sedangkan padding akan membuat dimensi elemen Anda (set height + padding) jadi misalnya jika Anda memiliki div 100x100px dengan padding 5 px, div Anda sebenarnya akan menjadi 105x105px

Pada dasarnya, perbedaan antara bantalan dan margin berasal dari latar belakang. Padding akan menentukan ruang antar konten, sementara margin menentukan tepi elemen luar!

Padding adalah ruang antara konten Anda dan perbatasan. Sedangkan Margin adalah ruang antara para perbatasan dan elemen lainnya.