Pada kesempatan kali ini, kita akan mempelajari tentang properti CSS. Yaitu margin dan padding.
Margin dan Padding adalah properti dari CSS yang digunakan untuk mengatur sisi tiap elemen pada HTML.
Biasanya, kedua properti ini juga paling banyak digunakan dalam sebuah proyek website.
Dari namanya saja sudah beda, seperti biasanya fungsinya juga pasti beda.
Margin, berfungsi untuk mengatur jarak elemen HTML dari luar.
Padding, berfungsi untuk mengatur jarak elemen HTML dari dalam.
Bingung??? Oke, langsung aja kita praktekkan.
Untuk lebih jelasnya, kita tambahkan properti background-color pada artikel sebelumnya.
1. Margin
Margin fungsinya mengatur jarak antara satu elemen dengan elemen lainnya pada HTML.
Sebagai contoh kita bisa melihat script kode berikut.
<h3 style="background-color: greenyellow;">Tanpa Margin</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Nah, pada contoh di atas masih belum menggunakan Margin. Adapun format margin adalah berikut ini:
margin: ukuran_atau_jarak satuan_ukuranUntuk satuan ukurannya biasanya dengan format px, inc, cm, rem, dan lain-lain.
Oke, berikut ini scriptnya.
<h3 style="background-color: greenyellow; margin: 10px;">Menggunakan Margin</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Jika kita lihat, hasilnya pada gambar kedua dan pertama ada perbedaan.
Pada gambar yang kedua, kita lihat kotak warna elemen HTMLnya jadi berpindah jaraknya dari posisi semula selebar 10px.
Adapun posisinya meliputi sudut kiri, atas, kanan, bawah sama-sama berpindah jarak selebar 10px.
Akan tetapi margin juga bisa dipindahkan berdasarkan salah satu sudut saja, contohnya sebagai berikut.
<h3 style="background-color: greenyellow; margin-top: 20px;">Margin Atas</h3>
<h3 style="background-color: greenyellow; margin-right: 50px;">Margin Kanan</h3>
<h3 style="background-color: greenyellow; margin-bottom: 40px;">Margin Bawah</h3>
<h3 style="background-color: greenyellow; margin-left: 50px;">Margin Kiri</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Selain dari itu, ada beberapa pembagian lagi dalam mengatur tiap sudutnya. Langsung aja kita perhatikan kode berikut ini.
<h3 style="background-color: greenyellow; margin: 20px;">Margin 4 Sisi Sekaligus</h3>
<h3 style="background-color: greenyellow; margin: 50px 100px;">Margin 2 Sisi</h3>
<h3 style="background-color: greenyellow; margin: 5px 100px 10px;">Margin 3 Sisi</h3>
<h3 style="background-color: greenyellow; margin: 5px 50px 10px 60px;">Margin 4 Sisi berbeda</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Dari kode tersebut, menghasilkan tampilan yang berbeda pada tiap elemen. Itu bisa dilihat pada gambar di atas.
Berikut ini ada deskripsi singkat mengenai ke empat margin pada script kode di atas.
-Margin 4 sisi sekaligus, untuk 4 sudut margin. Dengan begini, 4 sudut memiliki lebar atau jarak yang sama.
-Margin 2 sisi, untuk 2 sudut besar margin. Jadi pada contoh di atas, 50px untuk sudut atas dan bawah, dan 100px untuk kiri dan kanan.
-Margin 3 sisi, untuk 3 sudut. Jadi pada contoh di atas, 5px untuk sudut atas, 100px untuk sudut kiri dan kanan, dan 10px untuk sudut bawah.
-Margin 4 sisi berbeda, untuk 4 sudut margin jika per sudutnya beda ukuran. Jadi pada contoh di atas, 5px untuk sudut atas, 50px untuk sudut kanan, 10px untuk sudut bawah, dan 60px untuk sudut kiri. Jadi, urutan mengikuti pola segi empat, berawal dari atas, lalu kanan, kemudian bawah, hingga ke kiri.
2. Padding
Padding merupakan sebutan untuk spasi atau ruang di dalam tag HTML. Untuk aturan penulisannya, mirip sekali dengan margin. Oke, langsung aja ya kita mulai.
Berikut ini adalah contoh tanpa menggunakan Padding.
<h3 style="background-color: greenyellow;">Tanpa Padding</h3>Dan beginilah hasilnya.
Nah, sekarang kita lihat jika ditambahkan dengan padding.
<h3 style="background-color: greenyellow; padding: 30px;">Ditambah Padding sebesar 30px</h3>Dan beginilah hasilnya di browser.
Seperti yang kita lihat pada gambar di atas.
Spasi atau ruangan dalam konten tersebut melebar sebesar 30px tiap sudut.
Sama seperti margin, padding juga bisa dilebarkan berdasarkan salah satu sudut saja, contohnya sebagai berikut.
<h3 style="background-color: greenyellow; padding-top: 30px;">Padding Atas</h3>
<h3 style="background-color: greenyellow; padding-right: 30px;">Padding Kanan</h3>
<h3 style="background-color: greenyellow; padding-bottom: 30px;">Padding Bawah</h3>
<h3 style="background-color: greenyellow; padding-left: 30px;">Padding Kiri</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Selain dari itu, ada beberapa pembagian lagi dalam mengatur tiap sudutnya. Langsung aja kita perhatikan kode berikut ini.
<h3 style="background-color: greenyellow; padding: 20px;">Padding 4 Sisi Sekaligus</h3>
<h3 style="background-color: greenyellow; padding: 50px 100px;">Padding 2 Sisi</h3>
<h3 style="background-color: greenyellow; padding: 10px 100px 50px;">Padding 3 Sisi</h3>
<h3 style="background-color: greenyellow; padding: 5px 50px 10px 60px;">Padding 4 Sisi berbeda</h3>Maka akan menghasilkan tampilan seperti ini pada browser.
Dari kode tersebut, menghasilkan tampilan yang berbeda pada tiap elemen. Itu bisa dilihat pada gambar di atas.
Berikut ini ada deskripsi singkat mengenai ke empat padding pada script kode di atas.
-Padding 4 sisi sekaligus, untuk 4 sudut padding. Dengan begini, 4 sudut memiliki lebar atau jarak yang sama.
-Padding 2 sisi, untuk 2 sudut besar padding. Jadi pada contoh di atas, 50px untuk sudut atas dan bawah, dan 100px untuk kiri dan kanan.
-Padding 3 sisi, untuk 3 sudut. Jadi pada contoh di atas, 10px untuk sudut atas, 100px untuk sudut kiri dan kanan, dan 50px untuk sudut bawah.
-Padding 4 sisi berbeda, untuk 4 sudut padding jika per sudutnya beda ukuran. Jadi pada contoh di atas, 5px untuk sudut atas, 50px untuk sudut kanan, 10px untuk sudut bawah, dan 60px untuk sudut kiri. Jadi, urutan mengikuti pola segi empat, berawal dari atas, lalu kanan, kemudian bawah, hingga ke kiri.
Demikianlah postingan kali ini. Semoga bermanfaat ya.