Pengertian Padding, Margin Dan Border Dalam CSS

Selamat Sore Sobat The Darkness Cheater. Bagaimana Kabarnya? Semoga Semua Baik-Baik Saja. Hehehe. Lama Tidak Posting Nih, Jadi Saya Iseng Posting Tips Saja. Mungkin Sobat Sedikit Bosan Dengan Content Di TDC, Ya Maklum Karena Admin Sangat Sibuk. Dan Kali Ini Saya Akan Memberi Sedikit Pelajaran Yang Sudah Tidak Asing Lagi Yaitu CSS Lebih Tepatnya Di Bagian Padding, Margin Dan Border. Saya Yakin Pasti Berguna Buat Sobat Yang Ingin Belajar CSS Lebih Dalam. Ok, Kali Ini Adalah Pengertian Dari Masing-Masing Komponen :

• Padding : Digunakan Untuk Menentukan Jarak Komponen Body Ke Bagian Border Atau Ukuran Jarak Bagian Dalam.
• Border : Garis Tepi Dari Sebuah Komponen (Content)
• Margin : Ukuran Jarak Bagian Luar Atau Jarak Setelah Border.

Bagaimana? Sederhana Bukan? Hehehe. Silahkan Diperdalam Dahulu Pengertian Ke-3 Komponen Di Atas Kemudian Lanjut Ke Cara Penggunaannya.

Cara Penggunaan :

Padding 

Penulisan CSS Untuk Padding Adalah padding:5px 5px 5px 5px; Urutan Penggunaan Ukurannya Adalah Mulai Dari Yang Paling Depan Yaitu Atas, Kanan Bawah, Kiri. Atau Jika Sobat Ingin Memecahnya Menjadi Bagian Yang Lebih Spesifik Yaitu : 

• padding-top:5px; ~ Digunakan Untuk Padding Bagian Atas
• padding-right:5px; ~ Digunakan Untuk Padding Bagian Kanan
• padding-bottom:5px; ~ Digunakan Untuk Padding Bagian Bawah
• padding-left:5px; ~ Digunakan Untuk Padding Bagian Kiri

Margin

Penulisan CSS Untuk Margin Adalah margin:5px 5px 5px 5px; Urutan Penggunaan Ukurannya Adalah Mulai Dari Yang Paling Depan Yaitu Atas, Kanan Bawah, Kiri. Atau Jika Sobat Ingin Memecahnya Menjadi Bagian Yang Lebih Spesifik Yaitu : 

• margin-top:5px; ~ Digunakan Untuk Margin Bagian Atas
• margin-right:5px; ~ Digunakan Untuk Margin Bagian Kanan
• margin-bottom:5px; ~ Digunakan Untuk Margin Bagian Bawah
• marg-left:5px; ~ Digunakan Untuk Margin Bagian Kiri

Border

Penulisan CSS Untuk Border Adalah border:3px solid #666666 . Dari 3 Komponen Border Tersebut Berikut Penjelasannya :

• border:3px ~ Merupakan Ukuran Ketebalan Dari Border Tersebut (border-width)
• solid ~ Merupakan Jenis Style Dari Border Tersebut (border-style)
• #666666 ~ Merupakan Warna Dari Border Tersebut (border-color)

Macam-Macam Satuan Dalam CSS

Satuan Dalam CSS Dikelompokkan Menjadi 2 Bagian Yaitu:

1. Statik
2. Relatif

Penjelasannya Setiap Kelompoknya :

Relatif

• in ~ Satuan Inchi
• cm ~ Satuan Centimeter
• mm ~ Satuan Milimeter
• pt ~ Satuan Point (1 Point = 1/72 Inchi)
• pc ~ Satu Pica (1 Pica = 12 Point)
• px ~ Satuan Pixel (Titik Terkecil Dalam Visual PC)

Statik

• % ~ Satuan Persen
• em ~ Satuan em / ems (1em = Ukuran Font Yang Tengah Dalam Elemen)
• ex ~ Satuan X-Height Suatu Font (X-Height Biasanya Setengah Dari Ukuran Dasar Font)

Contoh Dari Style Border

dashed

solid

dotted

double

groove

ridge

inset

outset

Ok Itu Sedikit Pelajaran Yang Bisa Saya Berikan. Terima Kasih.

Created By : The Dark Cheater
Source : WWDQ

Related Post: