Pertanyaan Kapan menggunakan margin vs padding di CSS


Saat menulis CSS, apakah ada aturan atau pedoman tertentu yang harus digunakan dalam memutuskan kapan harus digunakan margin dan kapan menggunakannya padding?


1968
2018-02-03 03:20


asal


Jawaban:


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 itu vertikal margin otomatis runtuh, dan padding tidak. Pertimbangkan dua elemen satu di atas yang lainnya masing-masing dengan padding 1em. Padding ini dianggap sebagai bagian dari elemen, dan selalu dilestarikan. Jadi Anda akan berakhir dengan isi elemen pertama, diikuti oleh padding elemen pertama, diikuti oleh padding yang kedua, diikuti oleh konten elemen kedua. Dengan demikian isi dari dua elemen akan berakhir menjadi terpisah.

Sekarang ganti padding itu dengan 1em margin. 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 1em gabungan margin diikuti oleh konten elemen kedua. Jadi isi dari dua elemen hanya terpisah satu bagian.

Ini dapat benar-benar berguna ketika Anda tahu bahwa Anda ingin mengatakan jarak antar elemen, terlepas dari elemen apa yang ada di sebelahnya.

Dua perbedaan besar lainnya adalah padding dimasukkan dalam wilayah klik dan warna latar / gambar, tetapi bukan margin.


1213
2018-02-07 20:59



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

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

enter image description here


1336
2018-02-03 03:22



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

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

enter image description here

Satu hal yang perlu diingat adalah browser standar yang sesuai (IE quirks adalah pengecualian) hanya render bagian konten ke lebar yang diberikan, jadi lacak ini dalam perhitungan tata letak. Perhatikan juga bahwa kotak batas terlihat sedikit comeback dengan Bootstrap 3 mendukungnya.


524
2018-05-04 19:21



BATAS vs LAPISAN :

  1. Margin digunakan dalam elemen untuk menciptakan jarak antara elemen itu dan elemen halaman lainnya. Di mana padding 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 diekstraksi dari Margin Vs Padding - CSS Properties

Margin vs Padding


76
2018-05-21 07:00



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

Bandingkan elemen pemblokiran dengan gambar yang tergantung di dinding:

  • Itu jendela peramban seperti tembok.
  • Itu konten seperti sebuah foto.
  • Itu batas seperti ruang dinding antara gambar berbingkai.
  • Itu lapisan sama seperti tikar di sekitar foto.
  • Itu berbatasan seperti border pada frame.

Ketika memutuskan antara margin & padding, itu adalah aturan praktis yang bagus untuk digunakan batas ketika Anda memberi jarak elemen dalam hubungan dengan hal-hal lain di dinding, dan lapisan saat Anda menyesuaikan tampilan elemen itu sendiri. Margin tidak akan mengubah ukuran elemen, tetapi padding biasanya akan membuat elemen lebih besar1.

1  Model kotak default ini dapat diubah dengan box-sizing atribut.


72
2017-12-17 01:10



Berikut beberapa HTML yang menunjukkan caranya padding dan margin memengaruhi clickability, dan pengisian latar belakang. Sebuah objek menerima klik pada paddingnya, tetapi klik pada objek yang diberi 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>


30
2018-02-09 05:29



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

Seperti ketika Anda memberikan sesuatu {padding: 10px;}, Anda harus mengurangi lebar elemen dengan 20px untuk menjaga 'cocok'Dan tidak mengganggu elemen lain di sekitarnya.

Jadi saya biasanya memulai dengan menggunakan paddings untuk mendapatkan segalanya 'packed'dan kemudian gunakan margin untuk tweak minor.

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


30
2018-02-03 05:35



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

enter image description here

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

perhatikan bahwa beberapa kali Anda harus menggunakan margin.


27
2017-08-01 11:28



Kapan Harus Menggunakan Margin dan Padding

Ada dua cara dalam CSS untuk membuat ruang di sekitar elemen Anda: margin dan padding. Dalam sebagian besar skenario penggunaan, keduanya identik secara fungsional tetapi sebenarnya, mereka berperilaku dengan cara yang sedikit berbeda. Ada perbedaan penting antara margin dan padding yang harus Anda pertimbangkan ketika memilih yang akan digunakan untuk memindahkan elemen di sekitar halaman. Namun, dalam kasus-kasus di mana margin atau padding dapat digunakan untuk efek yang sama, banyak keputusan yang turun ke preferensi pribadi.

Kapan menggunakan margin

  1. Anda ingin jarak Anda muncul di luar "kotak" yang dibuat oleh properti perbatasan. Margin berada di luar perbatasan, jadi Anda akan menggunakannya jika Anda ingin perbatasan tetap berada di satu tempat. Ini dapat berguna jika Anda memiliki, misalnya, bilah sisi dengan batas yang ingin Anda pindahkan dari area konten utama Anda.

  2. Anda tidak ingin warna latar belakang atau gambar Anda menginvasi ruang pribadi Anda. Warna dan gambar latar belakang berhenti di perbatasan, jadi jika Anda lebih suka menjaga latar belakang Anda dari ruang yang Anda buat, margin adalah properti yang Anda inginkan.

  3. Anda ingin ruang yang bisa dilipat di bagian atas dan bawah elemen Anda. Margin atas dan bawah berperilaku berbeda dari margin samping jika dua margin di atas satu sama lain, mereka runtuh ke ukuran set margin terbesar. Sebagai contoh, jika saya menetapkan paragraf untuk memiliki margin atas 20 piksel dan margin bawah 15 piksel, saya hanya akan memiliki 20 piksel total ruang antara paragraf (dua margin saling runtuh, dan kemenangan terbesar keluar) .

Kapan menggunakan padding

  1. Anda ingin semua ruang yang Anda buat berada di dalam perbatasan Anda. Padding terkandung dalam batas Anda, jadi ini berguna untuk mendorong batas Anda dari konten di dalam elemen Anda.

  2. Anda membutuhkan warna / gambar latar belakang untuk melanjutkan ke ruang yang Anda buat. Latar belakang Anda akan terus berada di belakang padding Anda, jadi gunakan saja jika Anda ingin latar belakang Anda mengintip.

  3. Anda ingin ruang atas dan bawah Anda berperilaku lebih kaku. Misalnya, jika Anda mengatur paragraf di dokumen Anda untuk memiliki padding atas 20 piksel dan padding bawah 15 piksel, maka setiap kali Anda memiliki dua paragraf berturut-turut, mereka sebenarnya akan memiliki total 35 piksel ruang diantara mereka.


21
2017-09-09 20:00