Belajar CSS Part 4 Margin dan Padding dalam CSS

Belajar CSS Part 4 Margin dan Padding dalam CSS

Assalamualaikum Wr. Wb.

PENGERTIAN

Padding merupakan jarak yang memisahkan bagian isi dengan border atau bagian isi tanpa border dengan margin-nya. Atau bisa juga properti ini menghasilkan ruang disekitar konten.

Margin merupakan bagian terluar atau yang memisahkan padding dengan halaman.

Di dalam CSS kita dapat dengan bebas mengatur batas-batas padding dan margin. Untuk Margin memiliki sifat-sifat berikut.

• margin-top
• margin-right
• margin-bottom
• margin-left

Semua margin properti dapat memiliki nilai berikut:

• auto - browser menghitung margin
• panjang - menetapkan margin di px, pt, cm , dll
• % - Menetapkan margin di% dari lebar dari elemen yang mengandung
• mewarisi - menetapkan bahwa margin harus diwarisi dari elemen induk

Sedangkan Padding memiliki sifat yang hampir sama dengan margin contohnya.

• padding-top
• padding-right
• padding-bottom
• padding-left

Semua padding dapat memiliki nilai berikut:

• panjang - menetapkan padding di px, pt, cm , dll
• % - Menentukan bantalan di% dari lebar elemen yang mengandung
• mewarisi - menetapkan bahwa padding harus diwarisi dari elemen induk

LATAR BELAKANG

Untuk mengatur batas antara border dengan isi maupun padding dengan halaman.

MAKSUD & TUJUAN

Memudahkan kita dalam mengatur posisi konten di dalam web.

ALAT & BAHAN

• Text Editor
• Browser

LANGKAH KERJA

Sudah dijelaskan di atas tentang pengertian dan fungsinya, sekarang kita coba untuk mengimplementasikan kedalam sebuah web.

• Padding

Padding di dalam CSS memiliki beberapa sifat, nah berikut adalah penggunaan sifat-sifat dari properti padding tersebut.

Nb: Untuk sifat top mengatur batas di atas, sedangkan bottom mengatur batas bawah, right mengatur batas kanan, dan left mengatur batas kiri.

Hasilnya bisa dilihat pada gambar di atas.

• Margin

Di dalam margin juga terdapat fungsi yang tidak beda dengan padding, penggunaan fungsi tersebut bisa dilihat dalam contoh berikut.

Sama halnya dengan padding, fungsi dari sifat-sifat margin tidak beda dengan fungsi dari sifa-sifat padding.

Di atas merupakan hasil dari margin di dalam CSS. Perbedaanya bisa kita lihat dengan jelas.

KESIMPULAN

Padding dan Margin merupakan properti yang ada di dalam CSS yang memiliki fungsi yang hampir sama. Hanya saja padding itu mengatur batas antara isi dengan border, sedangkan margin untuk mengatur batas antara padding dengan halaman.

Mungkin itu dulu dari saya, kurang lebihnya mohon maaf.

Syukron

Wassalamualaikum Wr. Wb.

Referensi

https://www.w3schools.com/