Perbedaan antara margin dan padding?

372

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)?

css 
— bahasa maklunian
sumber
14
stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/... Tiga tautan pertama dari pencarian padding vs margin. Saya pikir kita perlu menambahkan panah ke bilah pencarian dan membuat hijau.
— Lime
2
Ini mungkin membantu Anda memahami perbedaan digizol.com/2006/12/margin-vs-padding-css-properties.html
— lkamal
2
Perlu diketahui juga bahwa Internet Explorer menjumlahkan margin / batas / lebar padding secara berbeda (dalam mode non-quirks default) daripada hampir semua browser lainnya.
— David R Tribble
1
Jika margin tidak berfungsi, coba padding
— JoelFan

Jawaban:

410

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

masukkan deskripsi gambar di sini

— abcd
sumber
3
Lihat juga situs-situs ini untuk mendapatkan definisi. Tapi grafiknya adalah ilustrasi yang sempurna. w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp
— Suroot
@maclunian: Lihat juga situs ini w3schools.com/css/css_boxmodel.asp di samping tautan @ Suroot di atas.
— abcd
Bagaimana hal ini terkait dengan Lebar dan Tinggi konten yang ditetapkan? Di mana itu diukur pada semua ini?
— Nyerguds
128

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.

— Nathan
sumber
6
Perhatikan bahwa ada keadaan yang sangat spesifik di mana margin vertikal runtuh - bukan hanya dua margin vertikal yang akan melakukannya. Yang hanya membuatnya semakin membingungkan (kecuali Anda sangat terbiasa dengan model kotak).
— BoltClock
76

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

— LostLin
sumber
15
Saya percaya padding diterapkan ke setiap sisi, sehingga elemen akan menjadi 110x110px
— 2013 Asker
Ehm, afaik padding tidak mengubah lebar elemen Anda jika lebar itu telah ditetapkan selain auto. Jika lebarnya adalah auto, maka padding tambahan akan menambah lebar elemen padded sesuai (dan dari kedua sisi, seperti @ 2013 Asker disebutkan)
— Flater
1
Saya pikir itu agak menyesatkan untuk mengatakan bahwa Anda div akan menjadi 110px oleh 110px karena lebar div Anda akan tetap 100px (dengan asumsi ukuran kotak ditetapkan sebagai konten-kotak).
— wmock
44

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) masukkan deskripsi gambar di sini

— sms247
sumber
2
Ini tidak menjawab mengapa penting untuk mengetahui perbedaannya.
— GreenAsJade
38

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.

— Wind Chimez
sumber
30

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

— Abdul Gafoor
sumber
25

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.

— Rakesh Singh
sumber
1
Elemen mana yang tidak memiliki batas?
— Sarim Javaid Khan
10

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.

— Paul
sumber
Sebagian besar jawaban teratas merujuk padding yang "di dalam" elemen dan margin yang "di luar" darinya, yang sudah menyiratkan padding berkontribusi pada area klik yang lebih besar. Tidak begitu jelas ketika Anda berhadapan dengan kotak yang benar-benar transparan, ...
— BoltClock
9

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).
— MAChitgarha
sumber
4

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.

— Ernest Friedman-Hill
sumber
2

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.

— chunkyboy
sumber
2

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>
— Rajat
sumber
1

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>
Luaskan cuplikan

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.

— Programer yang rajin
sumber
0

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.

— Henry
sumber
0

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

— prabeesh rk
sumber
0

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.

— creswei
sumber
-1

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.

— Ars
sumber
-1

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

— Shyamal Kapri
sumber
apakah Anda memperhatikan jawaban ini sudah diberikan? - dan dengan penekanan tambahan dan yang sesuai?
— JerryOL
-1

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

— Vinh Dat Ha
sumber
-7

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

— ALI MAMOON RIZWAN
sumber
1
Marginnya tidak sesederhana itu, dan ini tidak mengatakan apa pun yang belum dikatakan selusin jawaban sebelumnya.
— Quentin
2
Anda baru saja mengulangi jawaban sebelumnya.
— Johnroe Paulo Cañamaque
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.