CSS Tutorial Part 3 : Mengatur Margin dan padding pada CSS

Assalammualaikum Wr.Wb.

Create-script - hai gaess...kali ini saya akan sharing mengenai cara mengatur padding dan margin pada CSS...diulas dari penjelasan Margin dan Padding, dan cara penggunaannya....baik, mari kita simak pembahasan berikut ini...

A. PENDAHULUAN

Pengertian

Margin dan Padding adalah sebuah atribut yang digunakan untuk mengatur sisi dalam dari sebuah elemen, dan juga mengatur sisi luar dari sebuah elemen.

Latar Belakang

Margin dan padding adalah atribut yang paling sering digunakan dalam mendesain sebuah website, hal ini dimaksudkan agar website yang dibuat lebih teratur dan lebih terlihat indah.

Maksud dan Tujuan

Agar pembaca dapat menggunakan margin dan padding dalam pembuatan websitenya

Hasil yang Diharapkan

Dapat menggunakan dan mengerti cara penggunaan padding dan margin, serta dapat menerapkannya ppada website yang akan dibuatnya.

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN
Margin dan padding adalah atribut yang paling sering digunakan dalam pembuatan suatu website, hal ini bertujuan untuk mengatur sisi dalam dan sisi luar pada elemen supaya lebih enak dipandang.

Mengenal Margin pada CSS

Margin adalah atribut yang digunakan untuk mengatur jarak di sisi luar elemen. ada beberapa tipe margin yang ada di CSS, yaitu :

margin-top : untuk mengatur jarak bagian atas elemen.
margin-right : untuk mengatur jarak bagian kanan elemen.
margin-left : digunakan untuk mengatur jarak bagian kiri elemen.
margin bottom : digunakan untuk mengatur jarak bagian bawah elemen.
margin : digunakan untuk mengatur jarak bagian atas, kanan, kiri, dan bawah elemen.

Berikut ini adalah contoh penerapannya, ketikkan script HTML berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Menggunakan Margin pada CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="kotak">
        <h1>Ini adalah kotak pertama</h1>
    </div>

    <div class="kotak2">
        <h1>Ini adalah kotak kedua</h1>
    </div>

</body>
</html>

kemudian save, dan ketikkan script CSS berikut ini :

.kotak{
    background-color: blue;
    height: 200px;
    width: 300px;
    margin: 20px;
}

.kotak2{
    background-color: red;
    height: 100px;
    width: 200px;
    margin-left: 70px;
}

kemudian save dengan nama style.css (karena kita memanggil pada file HTMLnya dengan nama style.css). save satu folder bersama dengan file HTMLnya tadi.

kemudian buka file HTML nya melalui browser anda, maka akan menghasilkan tampilan seperti berikut ini :

Penjelasan : margin pada kotak adalah 20 px, berarti jarak atas, kanan, kiri, dan bawah kotak adalah 20 pixel.
pada kotak2 saya menggunakan margin-left. margin left digunakan untuk mengatur jarak kotak pada bagian kiri. value nya adalah 70px berarti jarak kotak2 pada bagian kiri adalah 70 pixel.

Mengenal Padding pada CSS

Padding adalah atribut yang digunakan untuk mengatur jarak pada bagian dalam / juga dapat mengatur besar kotak. sama halnya dengan margin, padding juga dapat dibedakan menjadi :

padding-top : digunakan untuk mengatur sisi dalam pada sebelah atas.
padding-left : digunakan untuk mengatur sisi dalam pada sebelah kiri.
padding-right : digunakan untuk mengatur sisi dalam pada sebelah kanan.
padding-bottom : digunakan untuk mengatur sisi dalam pada sebelah bawah.
padding digunakan untuk mengatur bagian atas, kiri, kanan, dan bawah sisi dalam bagian yang diatur.

Berikut ini adalah contoh penggunaan padding pada CSS.

Ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Menggunakan Padding pada CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Menggunakan Padding pada CSS Create-script</h1>
    <div class="kotak">
        <h1>Ini adalah Kotak padding</h1>
    </div>

    <div class="kotak2">
        <h1>Ini adalah kotak2 padding</h1>
    </div>

</body>
</html>

kemudian save, dan buat file CSSnya bernama style.css. lalu ketikkan script berikut di CSSnya :

h1{
    text-align: center;
}

.kotak{
    background: blue;
    height: 200px;
    width: 300px;
    padding: 20px;
}

.kotak2{
    background: red;
    height: 100px;
    width: 600px;
    padding-left: 70px;
}

kemudian save file CSS diatas, satu folder dengan file HTML milik kita.

kemudian buka file HTMLnya melalui web browser anda, maka hasilnya akan menjadi seperti ini :

Penjelasan : padding pada kotak adalah 20 px, berarti ukuran kotaknya adalah 20px padding, dan setiap pixel pada padding berbeda dengan pixel yang diisikan pada atribut biasa lainnya. dan jika padding hanya diisi 1 value, maka bentuk kotaknya akan berbentuk persegi.
pada kotak2 saya menggunakan padding-left. padding-left digunakan untuk mengatur ukuran kotak (bagian menyamping) value nya adalah 70px berarti ukuran lebarnya adalah 70 pixel.

D. HASIL YANG DIDAPATKAN