Margin ~ Pemrograman dan Teknologi

Kali ini saya akan mempelajari penggunaan margin. Margin adalah jarak tiap sisi element dari tepian halaman. Margin kiri dan kanan juga berlaku untuk elemen HTML di dalam div atau section.

Jarak atas dan bawah suatu elemen yang jadi isi div sebaiknya tidak diatur dengan margin. Paragraf sebaiknya juga tidak diberi margin. Ada properti lain yang bisa kalian gunakan untuk mengatur jarak elemen yang tidak dipengaruhi oleh margin.

Untuk mengatur margin secara spesifik, kalian bisa menggunakan margin-left, margin-top, margin-right, dan margin-bottom. Kalian juga bisa mempersingkat penulisan margin hanya dengan menggunakan properti margin yang berisi 4 nilai, 2 nilai, atau 1 nilai. Sebelum lanjut ke kode HTML-nya, berikut ini adalah penjelasaan kegunaan beberapa properti margin

margin => Penulisan singkat semua properti margin dengan satu kali deklarasi.
margin-bottom => Atur margin bawah dari sebuah elemen HTML.
margin-left => Atur margin kiri dari sebuah elemen HTML.
margin-right => Atur margin kanan dari sebuah elemen HTML.
margin-top => Atur margin atas dari sebuah elemen HTML.

Properti margin dengan 4 nilai akan mewakili nilai margin mulai dari margin atas dan memutar searah jarum jam sehingga polanya menjadi "top-right-bottom-left". Nilai tunggal akan mempengaruhi margin di semua sisi. Kalian juga bisa menggunakan 2 nilai saja dengan nilai pertama yg mewakili atas dan bawah, dan nilai lainnya mewakili margin samping.

Untuk lebih jelasnya, perhatikan contoh kode CSS di bawah ini.

.styleku{
    margin-left:8px;
    margin-top:32;
    margin-right:64;
    margin-bottom:80;
    height:100%;
    background : green;
    color : brown;
}

.styleku1{
    margin : 0px 4px 0px 16px;
    color : magenta;
    background : yellow;
}

.styleku2{
    margin : 8px;
    color : blue;
    background : cyan;
}

Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class= "styleku">
    <div class="styleku1">
        <p>ini paragraf 1</p>
        <p>ini paragraf 2</p>
        <p>ini paragraf 3</p>
        <p>ini paragraf 4</p>
    </div>
    <div class="styleku2">
        <p>ini paragraf 5</p>
        <p>ini paragraf 6</p>
        <p>ini paragraf 7</p>
        <p>ini paragraf 8</p>
    </div>
</div>
</BODY>
</HTML>

Sesuaikan nama file CSS-nya dengan nilai href pada tag link. Kalau kalian sudah belajar CSS eksternal, kalian seharusnya tidak bingung terkait dengan penamaan filenya.

Oh ya, selain menggunakan angka, nilai properti margin bisa berupa auto, initial atau inherit.