Perbedaan yang menonjol antara margin dan padding adalah margin membantu menciptakan ruang di sekitar unsur di luar perbatasan, sementara padding membantu menciptakan ruang di sekitar unsur di dalam perbatasan.
Umumnya, hampir setiap organisasi bisnis memelihara situs web. Ini membantu untuk memberikan informasi kepada pelanggan tentang produk dan layanan organisasi. HTML , CSS , dan JavaScript adalah bahasa dasar yang digunakan untuk pemrograman web. HTML membantu membangun struktur halaman web, sementara JavaScript membantu membuat konten menjadi interaktif. Selain itu, CSS adalah singkatan dari Cascade Style Sheets (CSS), dan membantu membuat halaman web rapi dengan gaya. Secara keseluruhan, margin dan padding adalah dua properti yang tersedia di CSS.
Topik bahasan kami tentang:
- Apa itu Margin? -Definisi, Contoh 2. Apa itu Padding? -Definisi, Contoh 3. Perbedaan Antara Margin dan Padding -Perbandingan perbedaan utama
Istilah Utama
CSS, Margin, Padding
Yang perlu anda ketahui tentang Margin?
Margin adalah properti dalam CSS yang digunakan untuk membuat spasi di sekitar unsur, di luar batas. Programmer dapat mengatur margin untuk atas, kanan, bawah dan kiri. Dengan kata lain, ia dapat mengatur nilai-nilai tersebut menggunakan margin-top, margin-right, margin-bottom dan margin-left.
Nilai-nilai dapat dari jenis berikut.
Pertama, otomatis memungkinkan browser untuk menghitung margin. Selain itu, panjang menunjukkan margin dalam px, pt atau cm, sementara % membantu menggambarkan margin sebagai persentase relatif terhadap lebar unsur yang memuatnya. Akhirnya, mewarisi menunjukkan bahwa margin harus mewarisi dari unsur induk.
Gambar 1: Contoh CSS dengan margin
Di atas adalah beberapa contoh. Contoh pertama mengatur margin atas, kanan, bawah dan kiri sesuai dengan nilai yang ditentukan. Contoh kedua mendefinisikan margin atas, kanan, bawah, kiri dalam satu baris. Ini memberikan margin 25px ke atas dan bawah sementara 50px ke kanan dan kiri unsur paragraf. Contoh terakhir mengatur semua margin menjadi 25px dari unsur paragraf.
Yang perlu anda ketahui tentang Padding?
Padding adalah properti di CSS yang membantu menciptakan ruang di sekitar unsur di dalam perbatasan. Programmer dapat mengatur padding untuk atas, kanan, bawah dan kiri. Dengan kata lain, dia dapat mengatur nilai tersebut menggunakan padding-top, padding-right, padding-bottom dan padding-left.
Nilai-nilai dapat dari jenis berikut.
Panjang menggambarkan padding dalam px, pt atau cm, sedangkan % menunjukkan padding sebagai persentase relatif terhadap lebar unsur yang mengandung. Akhirnya, mewarisi menjelaskan bahwa padding harus diwarisi dari unsur induk.
Gambar 2: Contoh CSS dengan padding
Di atas adalah beberapa contoh. Contoh pertama mengatur padding atas, kanan, bawah dan kiri sesuai dengan nilai yang ditentukan. Contoh kedua mendefinisikan padding atas, kanan, bawah, kiri dalam satu baris. Ini memberikan margin 25px ke atas dan bawah sementara 50px ke kanan dan kiri unsur paragraf. Contoh terakhir mengatur semua padding ke 25px dari unsur paragraf.
Perbedaan Antara Margin dan Padding
Definisi
Margin adalah properti CSS yang digunakan untuk membuat ruang di sekitar unsur di luar batas yang ditentukan, sedangkan padding adalah properti CSS yang digunakan untuk membuat ruang di sekitar unsur, di dalam batas yang ditentukan. Jadi, ini menjelaskan Perbedaan yang menonjol antara margin dan padding.
Nilai
Selanjutnya, nilai margin dapat berupa auto, length, % atau inheritance, sedangkan nilai padding dapat berupa length, % atau inheritance type. Maka dari itu, ini adalah perbedaan lain antara margin dan padding.
Kata terakhir
Singkatnya, margin dan padding adalah dua properti di CSS yang memungkinkan penataan halaman web. Tidak mungkin untuk menetapkan nilai negatif untuk properti tersebut. Perbedaan yang menonjol antara margin dan padding adalah margin membantu menciptakan ruang di sekitar unsur di luar perbatasan, sementara padding membantu menciptakan ruang di sekitar unsur di dalam perbatasan.
Sumber bacaan:
- “Margin CSS.” Margin CSS, Tersedia di sini . 2. Padding CSS, Tersedia di sini .
