Belajar Membuat Jarak Margin dan Padding CSS ~ Belajar Koding YUK !!

Belajar Margin

Margin adalah sebuah property yang bisa digunakan untuk memberikan jarak antar masing-masing tag HTML.

Sebagai contohnya, kita akan membuat dua objek kotak yang memiliki jarak antara objek kotak satu dengan yang lainnya dengan menggunakan tag <div>…</div>. Tulis script HTML dibawah ini pada file HTML :

<body>        <div class="box"></div>        <div class="box"></div></body>

Sekarang, silahkan tuliskan perintah di bawah ini pada file CSS :

.box {        width: 100px;        height: 100px;        background: red;        margin: 10px;}

Setelah itu, simpan dan jalankan pada web browser Mozila Firefox. Maka hasilnya masing-masing objek kotak akan memiliki jarak 10 piksel seperti gambar dibawah ini :

Belajar Membuat Jarak Margin dan Padding CSS

Property Margin ini kita bisa menentukan dari sudut mana jarak yang ingin kita tentukan. Jarak di bagian atas, bawah, kanan, ataupun kiri. Dengan menggunakan properti di bawah ini :

    Margin-left: 10px;
    Margin-right: 10px;
    Margin-top: 10px;
    Margin-bottom: 10px;

Belajar Padding

Nah, kita sudah bisa membuat jarak antara objek kotak satu dengan objek kotak yang lainnya. Namun bagaimana cara membuat jarak antara saat sebuah objek teks berada di dalam box.

Untuk menentukan objek teks memiliki jarak dengan tepi pada objek kotak. Maka kita bisa menggunakan properti padding. Seperti apa contohnya. Silahkan tulis tag <div> pada file HTML kita seperti di bawah ini :

Baca Juga

<div class="box">Hallo, saya adalah Text</div>

Kemudian, silahkan tuliskan script CSS elemen berikut pada file CSS kita.

.box {        width: 100px;        background: red;        margin: 10px;        padding: 20px;}

Silahkan simpan dan jalankan dengan menggunakan Mozila Firefox. Maka hasilnya akan seperti pada gambar di bawah ini :

Sama halnya dengan property Margin, property Padding ini kita bisa menentukan dari sudut mana jarak yang ingin kita tentukan. Jarak di bagian atas-kah, bawah-kah, kanan, atau kiri.

    Padding: left;
    Padding: right;
    Padding: top;
    Padding: bottom;

Dengan menggunakan property Margin dan Padding maka tampilan pada halaman website kita akan menjadi semaki rapih. Terus simak tutorial CSS berikutnya ya di Belajar Koding Yuk.