Kapan menggunakan margin vs padding di CSS [ditutup]


2357

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


Gunakan paddingpada <a>tag ketika Anda ingin menambah area yang bisa fokus .
Josh Habdas

Jawaban:


1586

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>


51
+1 Ketika menata tipografi dan urutan abrit dari paragraf, judul, dan daftar, hampir selalu lebih baik untuk menempatkan elemen dengan margin karena perilaku pembobolan margin yang berdekatan.
Pete B

17
Mengapa margin vertikal runtuh sedangkan margin horizontal tidak? Itu bisa membingungkan banyak orang
Marcos Pereira

16
Margin vertikal hanya runtuh untuk elemen blok. Untuk elemen blok sebaris margin ditambahkan baik secara vertikal maupun horizontal. Jadi saya tidak yakin itu adalah masalah bahwa margin horizontal tidak runtuh pada elemen blok karena mereka mengisi wadah mereka.
Mike

2
"Mengapa margin vertikal runtuh sedangkan margin horizontal tidak?" tidak ada mekanisme untuk menyatukan elemen blok satu sama lain tanpa menggunakan pelampung - yang marginnya tidak pernah runtuh (bahkan vertikal) atau posisi absolut, di mana jelas tidak ada runtuh, atau inline-blok, yang menggunakan model yang berbeda di mana itu dianggap inline dan konten (spasi, teks) adalah signifikan, atau hal-hal lain seperti tabel, kotak fleksibel, kolom di mana celah di antara kolom memiliki perilaku khusus. Jadi singkatnya tidak ada tempat yang marjin horisontal runtuh bisa digunakan bahkan jika mungkin
thomasrutter

5
Anda juga harus mencatat bahwa padding termasuk dalam lebar total / tinggi elemen, ketika digunakan dengan box-sizing: border-box;jadi jika Anda memiliki width: 100px; padding-left: 20px;total lebar akan tetap 100px tetapi area untuk konten berkurang sebesar 20px, tidak seperti di box-sizing: content-box;mana padding terpisah dalam menghitung lebar konten yang membuat total 120px lebar Anda di kotak konten;
Jomar Sevillejo

1494

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.

masukkan deskripsi gambar di sini


63
namun, jawaban yang benar adalah dengan @pavon di bawah ini. margin elemen yang berdekatan tumpang tindih sedangkan padding tidak tumpang tindih. yaitu, pemisahan total adalahpadding(A) + padding(B) + max(margin(A), margin(B))
nujum

9
Inilah praktik yang baik: gunakan batas merah solid untuk memeriksa bantalan dan margin. Terkadang, kita bisa mengacaukan hal-hal seperti <a>, yang menampung beberapa teks, dikelilingi oleh padding dan margin. Gunakan trik ini untuk memeriksa berapa banyak ruang yang bisa kita klik.
p3nchan

589

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.

masukkan deskripsi gambar di sini

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.



91

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 1 .

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


Sebenarnya saya tidak setuju box-sizing: border-boxmembuat "ruang untuk konten lebih kecil". Berikut adalah biola dengan 2 kotak di mana, jika saya terus mengisi yang sama dan menambahkan "Aktif", lalu "Nonaktifkan" pada hover, tidak masalah jika saya menggunakan box-sizing. Itu masih akan memperluas kotak. Saya harus memaksimalkan padding ke kotak terpanjang akan diperluas, kemudian gunakan trial and error untuk menghasilkan kombinasi yang cocok untuk kata-kata lain yang masuk ke dalam kotak yang akan menjaga lebar yang sama untuk setiap kata: jsfiddle.net / navyjax2 / ngzqqjah
vapcguy

3
Hai vapcguy, terima kasih atas masukan Anda. Pernyataan saya umumnya benar, ketika lebar atau tinggi dinyatakan untuk suatu elemen, sedangkan elemen dengan dimensi yang tidak dideklarasikan tidak benar-benar dipengaruhi oleh border-box(lihat: jsfiddle.net/8yravLmL/1 ). Saya akan membuat jawaban saya lebih bernuansa untuk menghindari kebingungan.
stvnrynlds

86

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

Margin vs Padding


Merujuk perbatasan, bukan yang agak kabur 'Margin ada di luar elemen blok sementara padding ada di dalam.' di luar / di dalam apa? Dan di luar / di dalam menunjukkan posisi statis, bukan itu mempengaruhi ukuran elemen yang mengandung. Jawaban ini menjelaskannya untuk saya.
nicodemus13

51

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

Ilustrasi model kotak CSS

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


1
Terima kasih. Sebuah gambar bernilai ribuan kata!
Catbuilts

33

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>


1
Anda dapat menjalankan kode serupa di jsfiddle: jsfiddle.net/fschwiet/y74Nz/3
Frank Schwieterman

31

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.


28

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

masukkan deskripsi gambar di sini

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.


24

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.


18

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.


15

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.


Menarik! Apakah Anda memiliki tautan ke bug vendor itu?
Alex Angas

1
@AlexAngas Semoga Wikipedia berhasil untuk Anda? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
John

14

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.

Margin dan Padding

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.

Jawaban ini tampaknya telah disalin dan ditempel dari tempat lain. Tautan yang disertakan dari "codemancers" tidak ada hubungannya dengan jawaban.
Alex Angas

2
Alex, foto dan bagian dari jawaban yang disorot berasal dari pembuat kode, pastikan hal-hal sebelum Anda memberikan komentar dan memilih
Alireza

8

Saya selalu menggunakan prinsip ini:

gambar model kotak

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.


6

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.


1

Margin ada di luar kotak dan padding ada di dalam kotak


Ini tidak menjawab pertanyaan.
TylerH

@ TylerH dia bertanya tentang ini saja ??? (kapan harus menggunakan margin dan kapan harus menggunakan bantalan?)
saurabhgoyal795

Ya, itu yang dia tanyakan. Bagaimana jawaban ini kapan harus menggunakan masing-masing?
TylerH
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.