Mengenal Margin & Padding Dan Cara Penggunaanya - CSS

Oleh Unknown

Jumat, 22 Agustus 2014

Bagikan :

Tweet

Assalamualaikum.wr.wb
Halow Ketemu Lagi Sama Saya. Kali Ini Saya Tidak Akan Membahas Tentang Sofware
Kali Ini Saya Ingin Jelasin Apa Itu Margin Dan Padding Di Dalam Css, Pasti Udah Tau Kan Css Itu Apa Untuk Devolover Css. Yg Belum Tau Silahkan Di Cari di Goolge Saya Tidak Akan Membahas Itu
Oke Langsung Di Pelajari

Margin

Margin membersihkan area di sekitar sebuah elemen (luar perbatasan). Margin tidak memiliki warna latar belakang, dan benar-benar transparan.
Bagian Atas , Bawah , Kiri, Kanan. Bisa di ubah Secara Indipenden Atau Bebas Menggunakan Properti Terpisah.
Ada 4 Value Di Properti Margin Ini

Nilai	Keterangan
auto	Untuk Membuat Margin Seperti Default
length	Menentukan margin di px, pt, cm, dll Nilai default adalah 0px
%	Sama Fungsinya Seperti Px Pt Cm DLL.

Penulisannya Ada Banyak Cara

Element {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}

margin-top : Mengatur Margin Bagian Atas
margin-bottom : Mengatur Margin Bagian Bawah
margin-right : Mengatur Margin Bagian Kanan
margin-left : Mengatur Margin Bagian Kiri

Jika Ingin Secara Singkat Dalam Penulisannya

Element {
margin:10px 10px 10px 10px;
}

Yang Di Beri Warna Merah Itu Mengatur Margin Bagian ATAS
Yang Di Beri Warna Hijau Itu Mengatur Margin Bagian KIRI
Yang Di Beri Warna Ungu Itu Mengatur Margin Bagian BAWAH
Yang Di Beri Warna Biru Itu Mengatur Margin Bagian KANAN

Ada Satu Lagi Penulisan Margin

Element {
margin: 10px 50px;
}

Yang Ber Value 10px Itu Mengatur Margin Atas Dan Bawah
Yang Ber Value 50px Itu Mengatur Margin Kiri Dan Kanan

Nah Jadi Margin Dan Sekarang Kita Menuju Padding Jika Margin Sudah Ngerti

Padding

Pa

Padding Berfungsi Untuk Mengatur Jarak Dalam Sebuah Kotak

Nilai	Keterangan
length	Mendefinisikan padding tetap (dalam pixel, pt, em, dll)
%	Mendefinisikan padding di % dari elemen yang mengandung

Cara Penulisannya Sama Seperti Embah Margin
Element {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
}

padding-top : Mengatur Margin Bagian Atas
padding-bottom : Mengatur Margin Bagian Bawah
padding-right : Mengatur Margin Bagian Kanan
padding-left : Mengatur Margin Bagian Kiri

Jika Ingin Secara Singkat Dalam Penulisannya

Element {
padding:10px 10px 10px 10px;
}

Yang Di Beri Warna Merah Itu Mengatur Margin Bagian ATAS
Yang Di Beri Warna Hijau Itu Mengatur Margin Bagian KIRI
Yang Di Beri Warna Ungu Itu Mengatur Margin Bagian BAWAH
Yang Di Beri Warna Biru Itu Mengatur Margin Bagian KANAN

Ada Satu Lagi Penulisan Margin

Element {
padding: 10px 50px;
}

Yang Ber Value 10px Itu Mengatur Margin Atas Dan Bawah
Yang Ber Value 50px Itu Mengatur Margin Kiri Dan Kanan

Tunggu Artikel Tutorial Css Di Blog Ini Yah. Sekian Semoga Bermanfaat
Jika Ada Kesalahaan Silahkan Di Bantu Mastah Atau Kurang Jelas Silahkan Bertanyak Di Komentar
Wassalamualaikum.wr.wb

Tag : Belajar Css