Posted by on

CSS (Cascading Style Sheets) merupapakan kode pemrograman yang berisi rangkaian instruksi yang menentukan bagaimana tampilan suatu dokumen HTML.

Syntax CSS terdiri dari selector dan declaration, di dalam declaration terdapat 1 atau lebih property dan value. margin dan padding adalah contoh dari property, keduanya memiliki fungsi yang hampir sama, namun dengan sedikit perbedaan. Taukah kalian apa itu margin dan padding pada CSS, apa fungsi dan perbedaan keduanya?

Margin adalah suatu jarak atau space antara suatu elemen dengan elemen yang ada diluar atau lainnya, jarak yang dibuat dimulai setelah border.
Padding adalah suatu jarak atau space antara inti elemen atau konten terhadap border elemen.

Perhatikan gambar dan contoh kode CSS dibawah, untuk lebih jelas dalam memahami apa fungsi dan perbedaan keduanya.

Image credits siteblogger.ru

 

Dibawah ini adalah penggunaan margin dan padding pada tag div, pada style 1, declaration (margin: 10px 15px 15px 10px) menghasilkan jarak keluar kotak biru sebesar 10px untuk bagian atas, 15px untuk bagian kanan, 15px untuk bagian bawah, dan 10px untuk bagian kiri.

Sedangkan pada style 2, declaration (padding: 10px 15px 15px 10px) menghasilkan jarak kedalam kotak biru sebesar 10px untuk bagian atas, 15px untuk bagian kanan, 15px untuk bagian bawah, dan 10px untuk bagian kiri.

style 1: margin: 10px 15px 15px 10px

 <div>margin: 10px 15px 15px 10px</div>

 

style 2: padding: 10px 15px 15px 10px

<div>padding: 10px 15px 15px 10px</div>

 

Cara Penulisan Padding pada CSS

padding-top: 5px; /* jarak sisi atas kedalam sebesar 5px  */
padding-right: 8px; /* jarak sisi kanan kedalam sebesar 8px */
padding-bottom: 5px; /* jarak sisi bawah kedalam sebesar 5px */
padding-left: 8px; /* jarak sisi kiri sebesar kedalam 8px */

atau

padding: 1px 2px 4px 8px; /* jarak sisi atas kedalam sebesar 1px, jarak sisi kanan kedalam sebesar 2px, jarak sisi bawah kedalam sebesar 4px, dan jarak sisi kanan kedalam sebesar 8px */
padding: 5px 8px 5px; /* jarak sisi atas kedalam sebesar 5px, jarak sisi kanan kedalam sebesar 8px, jarak sisi bawah kedalam sebesar 5px, dan jarak sisi kanan kedalam sebesar 8px (karena sisi kanan tidak memiliki value, maka otomatis akan mengikuti value sisi kiri) */
padding: 5px 8px; /* jarak sisi atas kedalam sebesar 5px dan jarak sisi bawah kedalam sebesar 8px */
padding: 7px; /* jarak sisi atas, kanan, bawah, kiri kedalam sebesar 7px */

Cara Penulisan Margin pada CSS

margin-top: 5px; /* jarak sisi atas keluar sebesar 5px */
margin-right: 8px; /* jarak sisi kanan keluar sebesar 8px */
margin-bottom: 5px; /* jarak sisi bawah keluar sebesar 5px */
margin-left: 8px; /* jarak sisi kiri sebesar keluar 8px */

atau

margin: 1px 2px 4px 8px; /* jarak sisi atas keluar sebesar 1px, jarak sisi kanan keluar sebesar 2px, jarak sisi bawah keluar sebesar 4px, dan jarak sisi kanan keluar sebesar 8px */
margin: 5px 8px 5px; /* jarak sisi atas keluar sebesar 5px, jarak sisi kanan keluar sebesar 8px, jarak sisi bawah keluar sebesar 5px, dan jarak sisi kanan keluar sebesar 8px (karena sisi kanan tidak memiliki value, maka otomatis akan mengikuti value sisi kiri) */
margin: 5px 8px; /* jarak sisi atas keluar sebesar 5px dan jarak sisi bawah keluar sebesar 8px */
margin: 7px; /* jarak sisi atas, kanan, bawah, kiri keluar sebesar 7px */

Apa itu HTML dan CSS? Sejarah HTML dan CSS serta Perkembangannya

Untuk seorang pemula yang baru memulai proses belajar Web, mungkin kalian sering mendengar istilah HTML & CSS, Taukah kalian Apa… Selengkapnya

CSS HTML Sam@skinnycat.net

Leave a Reply