Beranda
CSS

Mengenal Margin Dan Padding Pada CSS

Mengenal Margin Dan Padding Pada CSS

Apa itu margin pada CSS

Margin merupakan sisi luar dari sebuah element, misalnya temen-temen ingin mengatur jarak antar element temen-temen bisa menggunakan syntax margin untuk mengaturnya. Terdapat beberapa sisi luar margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element. berikut ini adalah Contoh penggunaan margin pada CSS. Contohnya seperti di bawah ini :

index.html

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


style.css

.box{
    background: blue;
    height: 200px;
    width: 300px;
    margin: 20px;
    }
    .box-dua{
    background: red;
    height: 100px;
    width: 200px;
    margin-left: 70px;
    }


Ketika file programnya di jalankan, maka hasilnya sebagai berikut :

Mengenal Margin Dan Padding Pada CSS

Perhatikan pada contoh di atas, pada kotak dua kita mengatur margin-left atau margin kiri sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau jarak luar segala sisi sebesar 20px.

Apa itu padding pada CSS

Padding adalah sisi dalam dari sebuah element, kita bisa menggunakan syntax padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. Sama seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom, jenis padding yaitu padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’ adalah sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja maka akan secara otomatis mengatur jarak atas, bawah, kiri dan kanan element yang bagian dalam. Berikut ini adalah Contoh penggunaan padding pada CSS :

index.html

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


style.css

h1{
    text-align: center;
    }
    .box{
    background: rgb(255, 136, 0);
    height: 200px;
    width: 300px;
    padding: 20px;
    }
.box-dua{
    background: rgb(0, 255, 106);
    height: 100px;
    width: 600px;
    padding-left: 70px;
    }


Ketika dijalankan file programnya, maka hasilnya seperti di bawah ini :

Mengenal Margin Dan Padding Pada CSS

Mungkin cukup sampai disini dulu mengenai pembahasan mengenai mengenal margin dan padding pada css, untuk selanjutnya kita akan belajar lebih lanjut mengenai css ini. Semoga sampai disini teman-teman bisa mengikutinya dengan baik ya, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.


Sekian dan terimakasih...

Posting Komentar