Belajar CSS Part 4 : Margin Dan Padding Pada CSS

Kamis, 24 November 2016

Belajar CSS Part 4 : Margin Dan Padding Pada CSS

    Tidak ada komentar

MENGENAL MARGIN DAN PADDING PADA CSS
Margin dan Padding adalah kode syntax yang paling sering digunakan untuk membuat sebuah website karena fungsi dari margin dan padding adalah mengatur sisi dalam sebuah element dan mengatur sisi luar sebuah element . Pada tutorial kali ini akan dijelaskan apa itu Margin ? apa itu Padding ? dan bagaimana cara penggunaanya

MENGENAL MARGIN PADA CSS
Margin adalah sisi luar dari sebuah elemen. Misalnya sobat ingin mengatur jarak luar antar element sobat dapat menggunakan syntax margin ini. Kita dapat mengatur jarak sebuah sisi yang kita kehendaki, berikut penjelasanya
  • margin-top : Mengatur jarak bagian luar pada sisi sebelah atas elemen
  • margin-bottom : Mengatur jarak luar dalam pada sisi sebelah bawah elemen
  • margin-left : Mengatur jarak bagian luar pada sisi sebelah kiri elemen
  • margin-right : Mengatur jarak bagian luar pada sisi sebelah kanan elemen
Sobat juga dapat menggunakan syntax "margin" saja maka otomatis akan mengatur jarak atas,bawah,kiri,kanan elemen. Perhatikan contoh berikut

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Margin CSS - Script Kiddies</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    
    <div class="kotak">
        <h1>Kotak Bagian 1</h1>
    </div>

    <div class="kotak-dua">
        <h1>Kotak Bagian 2</h1>
    </div>

</body>
</html>

style.css

.kotak{
    background: navy;
    color: white;
    margin: 25px;
    width: 400px;
    height: 180px;
}
.kotak-dua{
    background: crimson;
    color: white;
    width: 320px;
    height: 120px;
    margin-left: 60px;
}

Hasilnya seperti berikut

Perhatikan contoh diatas. Pada kotak-dua saya menggunakan margin-left atau margin kiri sebesar 60px atau 60 pixel, dan pada kotak pertama saya berikan margin sebesar 25px yaitu jarak luar segala element sebesar 25px.

MENGENAL PADDING PADA CSS
Padding adalah jarak sisi dalam sebuah element. Kita dapat mengatur jarak pada sisi dalam sebuah element dengan padding. Sama seperti yang memiliki sisi top,right,left,right . Berikut fungsi Syntax CSS yang berhubungan dengan padding
  • padding-top : Mengatur jarak bagian dalam pada sisi sebelah atas elemen
  • padding-bottom : Mengatur jarak bagian dalam pada sisi sebelah bawah elemen
  • padding-left : Mengatur jarak bagian dalam pada sisi sebelah kiri elemen
  • padding-right : Mengatur jarak bagian dalam pada sisi sebelah kanan elemen
Jika ingin mengatur jarak pada sisi bawah bagian atas,bawah,kiri,kanan sobat cukup menggunakan syntax "padding" . Berikut contoh penggunaan syntax Padding

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Padding CSS - Script Kiddies</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="kotak">
        <h1>Kotak Bagian 1</h1>
    </div>
     <div class="kotak-dua">
        <h1>Kotak Bagian 2</h1>
    </div>
 
</body>
</html>

style.css 
.kotak{
    background: navy;
    color: white;
    padding: 25px;
    width: 300px;
    height: 180px;
}
.kotak-dua{
    background: crimson;
    color: white;
    width: 420px;
    height: 120px;
    padding-left: 80px;
}

Hasilnya seperti berikut
Penggunaanya sama seperti margin tetapi dapat kita lihat apa perbedaanya ? yaitu margin dapat merubah jarak antara font dengan sisi bagian kiri dari kotak berwarna merah.

KESIMPULAN
Dapat kita simpulkan bahwa Padding berfungsi untuk mengatur jarak luar elemen dan padding mengatur jarak dalam elemen. Dua syntax CSS tersebut sangat penting kita pahami agar website yang kita buat nanti dapat terlihat menarik dan terstruktur alias tidak acak-acakan. Jika masih belum paham lihatlah gambar berikut



Cukup sekian tutorial Belajar CSS Part 4 ini jika ada pertanyaan silahkan berikan komentar pada kolom dibawah, Sekian Terima Kasih

Referensi : Malas Ngoding

TUTORIAL CSS LAINYA

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )