Mengatur Padding dan Margin di CSS

lebakcyber.net – Mengatur Padding dan Margin di CSS. Oke pada kesempatan kali ini kita akan membahs mengenai Margin dan juga Padding di CSS dimana Margin dan Padding tersebut paling banyak digunakan pada saat mendesain sebuah website dengan menggunakan CSS.

Margin dan Padding sendiri digunakan untuk mengatur sisi di bagian dalam pada sebuah element serta mengatur sisi luar pada sebuah element. Oleh karena itu pada kesempatan ini kita akan membahas mengenai apa itu Margin dan juga apa itu Padding serta bagaimana cara menggunakannya di CSS.

Definisi Margin di CSS

Margin merupakan sisi luar pada sebuah element, misalnya kalau kita ingin mengatur jarak dari satu element ke element yang lainnya. Kita dapat menggunakan syntax margin untuk melakukan pengaturannya.

Ada beberapa sisi luar pada margin, yaitu margin atas ditulis pada css dengan syntax “margin-top”, untuk margin bawah atau jarak luar bagian bawah di tulis pada CSS dengan syntax “margin-bottom”, untuk jarak luar sebelah kiri element dituliskan “margin-left” dan untuk sisi luar di bagian sebelah kanan element dituliskan dengan “margin-right”.

Tapi kalau kita hanya menggunakan syntax margin saja maka nantinya secara otomatis dapat digunakan untuk mengatur jarak bawah, atas, kiri dan juga kanan element. Berikut ini adalah contoh dari penggunaan margin di CSS, dan kita harus membuat sebuah file css dengan nama style.css dan juga index.html.

style.css

.box-satu{
    background: red;
    height: 200px;
    width: 300px;
    margin: 50px;
}
 
.box-dua{
    background: yellow;
    height: 100px;
    width: 200px;
    margin-left: 80px;
}

index.html

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

Nanti setelah dijalankankan file HTMLnya, outputnya akan seperti gambar dibawah ini :

Sekarang kita bahas sedikit perintah yang ada pada file style.css nya. Pada box-2, margin kiri atau margin-left kita atur 80px (pixel) dan pada box-satu kita mengatur warnanya menjadi merah dan margin luar di segala sisinya menjadi 50px (pixel).

Definisi Padding di CSS

Kalau Margin adalah sisi luar dari suatu element, maka Padding adalah sisi dalam dari sebuah element. Kita bisa menggunakan perintah Padding untuk memberikan pengaturan jarak untuk sisi dalam sebuah element yang ingin ditentukan.

Sama halnya seperti margin yang memiliki sisi-sisi didalamnya, seperti top, bottom, right dan left.

Jenis Padding atas dituliskan di CSS dengan perintah “Padding-Top” yang artinya mengatur sisi dalam sebelah atas pada suatu element.
Pada CSS perintah yang digunakan adalah “Padding-Bottom” untuk mengatur sisi dalam untuk jarak bagian bawah pada suatu element.
Pada CSS perintah yang digunakan adalah “padding-left” untuk mengatur sisi dalam untuk jarak bagian kiri pada suatu element.
Pada CSS perintah yang digunakan adalah “padding-right” untuk mengatur sisi dalam untuk jarak bagian kiri pada suatu element.

Dan kalau kita hanya memasukan perintah padding saja pada css yang digunakan, maka nantinya secara otomatis css akan mengatur jarak kanan, kiri, atas dan bawah pada element di bagian dalamnya.

Untuk lebih jelasnya silahkan perhatikan contoh penggunaan Padding dibawah ini :

style.css

.box-satu{
    background: red;
    height: 200px;
    width: 300px;
    padding: 50px;
}
 
.box-dua{
    background: yellow;
    height: 100px;
    width: 600px;
    padding-left: 85px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penggunaan Padding CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="box-satu">
        <h1>Contoh Padding di box satu</h1>
    </div>
 
    <div class="box-dua">
        <h1>Contoh Padding di box dua</h1>
    </div>
 
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi itulah beberapa penjelasan mengenai apa itu Margin dan juga Padding di CSS. Semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar CSS lainnya.

Lebak Cyber Tips dan Trik Komputer

Mengatur Padding dan Margin di CSS