Kursus IT Dasar CSS 025_Margin dan Padding

Margin

Dalam CSS, margin dan padding adalah dua konsep yang berbeda, keduanya digunakan untuk mengontrol ruang antar elemen dan memengaruhi tata letak halaman.

Efek contoh

Margin (Jarak Luar)

Margin adalah ruang antara elemen dan elemen yang berdekatan. Margin dapat digunakan untuk mengontrol jarak antar elemen dan memengaruhi tata letak halaman. Margin sendiri tidak memiliki warna latar belakang, sepenuhnya transparan, dan tidak memengaruhi ukuran aktual elemen. Nilainya bisa positif atau negatif, satuannya bisa piksel (px), persentase (%), em, dll.

Contoh:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Efek: Efek contoh Dapat menggunakan margin-top, margin-right, margin-bottom, margin-left untuk mengatur margin satu arah secara individual.

Contoh:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Efek:

Efek contoh

Padding (Jarak Dalam)

Padding adalah ruang antara konten internal elemen dan border elemen. Padding dapat digunakan untuk menyesuaikan jarak antara konten internal dan border, memengaruhi ukuran dan tata letak elemen. Padding mewarisi warna latar belakang elemen dan memengaruhi ukuran aktual elemen. Tidak mendukung nilai negatif, satuannya bisa piksel (px), persentase (%), em, dll.

Contoh:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">Tes padding</div>
2
    <br>
3
    <div class="base example2">Tes padding</div>
4
    <br>
5
    <div class="base example3">Tes padding</div>

Efek:

Efek contoh Dapat menggunakan padding-top, padding-right, padding-bottom, padding-left untuk mengatur padding satu arah secara individual.

Contoh:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">Tes padding</div>

Efek: Efek contoh

Margin

Margin (Jarak Luar)

Padding (Jarak Dalam)

Komentar