Kapan menggunakan margin vs padding di CSS [ditutup]

Saat menulis CSS, apakah ada aturan atau pedoman tertentu yang harus digunakan dalam memutuskan kapan akan digunakan margindan kapan akan digunakan padding?

TL; DR: Secara default saya menggunakan margin di mana-mana, kecuali ketika saya memiliki batas atau latar belakang dan ingin menambah ruang di dalam kotak yang terlihat.

Bagi saya, perbedaan terbesar antara padding dan margin adalah bahwa margin vertikal otomatis runtuh, dan padding tidak.

Pertimbangkan dua elemen satu di atas yang lainnya masing-masing dengan bantalan 1em. Padding ini dianggap sebagai bagian dari elemen dan selalu dipertahankan.

Jadi, Anda akan berakhir dengan konten elemen pertama, diikuti oleh padding dari elemen pertama, diikuti oleh padding dari elemen kedua, diikuti oleh konten dari elemen kedua.

Dengan demikian, isi dari kedua elemen tersebut pada akhirnya akan 2emterpisah.

Sekarang ganti bantalan itu dengan margin 1em. Margin dianggap berada di luar elemen, dan margin item yang berdekatan akan tumpang tindih.

Jadi, dalam contoh ini, Anda akan berakhir dengan konten elemen pertama diikuti oleh 1emmargin gabungan diikuti oleh konten elemen kedua. Jadi isi kedua elemen itu hanya 1emterpisah.

Ini bisa sangat berguna ketika Anda tahu bahwa Anda ingin mengatakan 1emjarak di sekitar elemen, terlepas dari apa elemen di sebelahnya.

Dua perbedaan besar lainnya adalah padding termasuk dalam wilayah klik dan warna / gambar latar belakang, tetapi tidak pada margin.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Margin ada di luar elemen blok sementara padding ada di dalam.

• Gunakan margin untuk memisahkan blok dari hal-hal di luarnya
• Gunakan padding untuk memindahkan konten dari tepi blok.

Yang terbaik yang saya lihat menjelaskan ini dengan contoh, diagram, dan bahkan pandangan 'coba sendiri' ada di sini .

Diagram di bawah ini saya pikir memberikan pemahaman visual instan tentang perbedaannya.

Satu hal yang perlu diingat adalah browser yang memenuhi standar ( quirks IE adalah pengecualian ) hanya merender bagian konten dengan lebar yang diberikan, jadi catatlah ini dalam perhitungan tata letak. Juga perhatikan bahwa kotak perbatasan melihat comeback dengan Bootstrap 3 mendukungnya.

Ada lebih banyak penjelasan teknis untuk pertanyaan Anda, tetapi jika Anda mencari cara untuk memikirkannya margin & padding yang akan membantu Anda memilih kapan dan bagaimana menggunakannya, ini mungkin membantu.

Bandingkan elemen blok dengan gambar yang tergantung di dinding:

• The jendela browser adalah seperti dinding.
• The konten adalah seperti sebuah foto.
• The margin adalah seperti dinding ruang antara gambar berbingkai.
• The padding adalah seperti anyaman di sekitar foto.
• The perbatasan adalah seperti perbatasan pada frame.

Saat memutuskan antara margin & padding, adalah aturan praktis yang bagus untuk menggunakan margin ketika Anda mengatur jarak elemen dalam hubungannya dengan hal-hal lain di dinding, dan padding saat Anda menyesuaikan tampilan elemen itu sendiri. Margin tidak akan mengubah ukuran elemen, tetapi padding biasanya akan membuat elemen lebih besar ¹ .

¹ Model kotak default ini dapat diubah dengan box-sizingatribut .

MARGIN vs PADDING :

1. Margin digunakan dalam suatu elemen untuk membuat jarak antara elemen itu dan elemen halaman lainnya. Di mana bantalan digunakan untuk membuat jarak antara konten dan batas elemen.

2. Margin bukan bagian dari elemen di mana padding adalah bagian dari elemen.

Silakan lihat gambar di bawah ini diambil dari Margin Vs Padding - Properti CSS

Dari https://www.w3schools.com/css/css_boxmodel.asp

Penjelasan dari berbagai bagian:

• Konten - Konten kotak, tempat teks dan gambar muncul

• Padding - Menghapus area di sekitar konten. Padding transparan

• Border - Perbatasan yang mengelilingi padding dan konten

• Margin - Menghapus area di luar perbatasan. Marginnya transparan

Contoh langsung (bermain-main dengan mengubah nilai): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Berikut adalah beberapa HTML yang menunjukkan bagaimana paddingdan marginmemengaruhi clickability, dan pengisian latar belakang. Objek menerima klik pada paddingnya, tetapi klik pada area objek margin pergi ke induknya.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Hal tentang margin adalah Anda tidak perlu khawatir tentang lebar elemen.

Seperti saat Anda memberikan sesuatu {padding: 10px;}, Anda harus mengurangi lebar elemen sebanyak 20px agar tetap pas ' dan tidak mengganggu elemen lain di sekitarnya.

Jadi saya biasanya memulai dengan menggunakan bantalan untuk mendapatkan semuanya 'packed ' dan kemudian menggunakan margin untuk tweak kecil.

Hal lain yang perlu diperhatikan adalah paddings lebih konsisten pada browser yang berbeda dan IE tidak memperlakukan margin negatif dengan sangat baik.

Margin membersihkan area di sekitar elemen (di luar perbatasan), tetapi padding membersihkan area di sekitar konten (di dalam perbatasan) elemen.

itu berarti bahwa elemen Anda tidak tahu tentang margin luarnya, jadi jika Anda mengembangkan kontrol web dinamis, saya sarankan untuk menggunakan padding vs margin jika Anda bisa.

perhatikan bahwa beberapa kali Anda harus menggunakan margin.

Adalah baik untuk mengetahui perbedaan antara margindan padding. Berikut ini beberapa perbedaan:

• Margin adalah ruang luar elemen, sedangkan padding adalah ruang bagian dalam elemen.

• Margin adalah ruang di luar perbatasan elemen, sedangkan padding adalah ruang di dalam perbatasan elemen.

• Margin menerima nilai otomatis:, margin: autotetapi Anda tidak dapat mengatur padding ke otomatis.

• Margin dapat diatur ke nomor apa pun, tetapi padding harus non-negatif.

• Saat Anda mendesain elemen, padding juga akan terpengaruh (mis. Warna latar), tetapi bukan margin.

Satu hal yang perlu diperhatikan adalah ketika margin yang runtuh otomatis mengganggu Anda (dan Anda tidak menggunakan warna latar belakang pada elemen Anda), sesuatu itu hanya lebih mudah digunakan padding.

Margin Lanjut versus Padding Dijelaskan

Tidak pantas untuk menggunakan paddingruang konten dalam suatu elemen; Anda harus memanfaatkan marginpada elemen anak sebagai gantinya. Browser lama seperti Internet Explorer salah menafsirkan model kotak kecuali ketika datang untuk menggunakan marginyang berfungsi sempurna di Internet Explorer 4 .

Ada dua pengecualian ketika menggunakan padding adalah tepat untuk digunakan:

1. Ini diterapkan pada elemen inline yang tidak dapat mengandung elemen turunan seperti elemen input.

2. Anda mengompensasi bug browser yang sangat beragam yang vendor * batuk * Mozilla * batuk * menolak untuk memperbaiki dan yakin (sejauh Anda mengadakan pertukaran reguler dengan editor W3C dan WHATWG) bahwa Anda harus memiliki solusi yang berfungsi dan solusi ini tidak akan mempengaruhi penataan selain bug yang Anda kompensasikan.

Ketika Anda memiliki elemen lebar 100% dengan padding: 50px;Anda secara efektif dapatkan width: calc(100% + 100px);. Karena marginini tidak ditambahkan ke widthitu tidak akan menyebabkan masalah tata letak yang tak terduga ketika Anda menggunakan marginpada child elementsbukannya paddinglangsung pada elemen.

Jadi jika Anda tidak melakukan salah satu dari dua hal yang tidak menambahkan padding untuk elemen tetapi untuk itu anak langsung / anak elemen (s) untuk memastikan Anda akan mendapatkan diharapkan perilaku dalam semua browser.

Pertama mari kita lihat apa perbedaannya dan apa tanggung jawab masing-masing:

1) Margin

Properti margin CSS digunakan untuk menghasilkan ruang di sekitar elemen.
Properti margin mengatur ukuran ruang putih di luar perbatasan. Dengan CSS, Anda memiliki kendali penuh atas margin.
Ada properti CSS untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

2) Padding

Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten.
Padding membersihkan area di sekitar konten (di dalam perbatasan) elemen.
Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk mengatur padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Jadi Margin adalah ruang di sekitar elemen, sedangkan Padding adalah ruang di sekitar konten yang merupakan bagian dari elemen.

Gambar ini dari pembuat kode menunjukkan bagaimana margin dan batas mendapatkan ke sana dan bagaimana kotak perbatasan dan kotak konten membuatnya berbeda.

Mereka juga mendefinisikan setiap bagian sebagai berikut:

• Kandungan - ini mendefinisikan area konten kotak tempat konten aktual seperti teks, gambar, atau mungkin elemen lainnya berada.
• Padding - ini membersihkan konten utama dari kotaknya.
  
• Berbatasan - ini melingkupi konten dan lapisan.
• Margin - area ini mendefinisikan ruang transparan yang memisahkannya dari elemen lain.

Saya selalu menggunakan prinsip ini:

Ini adalah model kotak dari fitur elemen inspect di Firefox. Ini bekerja seperti bawang:

• Konten Anda ada di tengah.
• Padding adalah ruang antara konten Anda dan tepi tag yang ada di dalamnya.
• Perbatasan dan spesifikasinya
• Margin adalah ruang di sekitar tag.

Jadi margin yang lebih besar akan membuat lebih banyak ruang di sekitar kotak yang berisi konten Anda.

Padding yang lebih besar akan menambah ruang antara konten Anda dan kotak yang ada di dalamnya.

Tidak satu pun dari mereka akan menambah atau mengurangi ukuran kotak jika diatur ke nilai tertentu.

Batas

Margin biasanya digunakan untuk membuat ruang antara elemen itu sendiri dan sekitarnya.

misalnya saya menggunakannya ketika saya sedang membangun navbar untuk membuatnya menempel di tepi layar dan tanpa celah putih.

Lapisan

Saya biasanya menggunakan ketika saya memiliki elemen di dalam perbatasan, <div> atau sesuatu yang serupa, dan saya ingin mengurangi ukurannya tetapi pada saat itu saya ingin menjaga jarak atau margin antara elemen-elemen lain di sekitarnya.

Jadi secara singkat, ini situasional; itu tergantung pada apa yang Anda coba lakukan.

Margin ada di luar kotak dan padding ada di dalam kotak