MENGATUR JARAK KOTAK BOX WEBSITE PADA CSS

Dalam mengatur jarak kotak box suatu website dapat digunakan pengaturan margin dan padding,

Margin digunakan untuk memberikan ruang space diluar eleme, dengan kata lain margin adalah spasi yang ada di sekitar batas luar suatu elemen, Padding merupakan ruang di antara batas elemen HTML dan kontennya, Padding berguna untuk mengendalikan jarak antara teks atau elemen konten dengan batas luar elemen

A. Margin

Margin dapat digunakan untuk semua sudut sekaligus dengan properti margin dan bisa juga mengatur secara individu menentukan setiap sudut dengan properti: margin-top, margin-right, margin-bottom dan margin-left.

Margin individu
Margin individu dapat digunakan untuk mengatur jarak yang lebih spesifik atau mendetail, margin individu diantaranya

• margin-top ( atas )
• margin-right ( kanan )
• margin-bottom ( bawah )
• margin-left ( kiri )

properti margin:

• Auto – browser menghitung margin secara otomatis berdasarkan ruang yang tersisa di dalam wadah
• Length – ukuran margin ditentukan dalam satuan seperti px, pt, cm, dll.
• % – menentukan margin sebagai persentase memungkinkannya untuk beradaptasi ketika ukuran layar berubah
• Inherit – menetapkan bahwa margin harus diwarisi dari elemen induknya

p {
    background-color: yellow;
    border: 1px solid black;
    margin-top: 25px;
    margin-right: 40px;
    margin-bottom: 60px;
    margin-left: 80px;
}

Margin shorthand
Dengan margin shorthand Anda bisa mempersingkat sebuah kode, Dengan cara ini dimungkinkan juga untuk menentukan semua properti margin dalam satu properti tunggal, ntuk menggunakan margin shorthand Anda cukup menggunakan properti margin

div {
    width: 200px;
    height: 80px;
    background-color: red;
}
#box-satu {
    margin: 10px 15px 20px 25px;
}
#box-dua {
    margin: 15px 20px 25px;
}
#box-tiga {
    margin: 25px 10px;
}
#box-empat {
    margin: 50px;
}

Margin auto
Properti margin dapat memiliki nilai auto atau otomatis,  Ini sangat berguna jika Anda ingin sebuah elemen otomatis rata kanan dan kiri secara horizontal

div {
    border: 1px solid black;
    width: 250px;
    margin: auto;
}

Margin inherit
Properti margin dapat memiliki nilai inherit (pewarisan). digunakan untuk menentukan agar nilai mewarisi dari elemen induknya.

div {
    border: 1px solid blue;
    margin-left: 70px;
}
p {
    margin: inherit;
}

Margin collapse
Margin collapse atau margin runtuh bisa terjadi jika suatu elemen bersentuhan seperti: margin-bottom pada elemen yang pertama dan margin-top pada elemen yang kedua saling besentuhan atau tarik menarik.

Contoh
Box berwarna merah memiliki margin-bottom 30px, Sedangkan box berwarna hijau memiliki margin-top 20px. Kedua elemen tersebut saling bersentuhan atau tarik menarik. Seharusnya menghasilkan margin sebesar 50px. Dari margin-bottom 30px ditambah margin-top 20px. Kenyataannya adalah collapse dan menghasilkan margin 30px saja yang diambil dari elemen yang memiliki nilai “terbesar”. Disinilah letak dan pengertian dari margin collapse tersebut

#merah {
    background-color: red;
    width: 250px;
    height: 150px;
    margin-bottom: 30px;
}
#hijau {
    background-color: green;
    width: 250px;
    height: 150px;
    margin-top: 20px;
}

Properti pada margin

Properti	Kegunaanya
margin	Mengatur semua properti margin dalam satu deklarasi
margin-top	Mengatur jarak margin bagian atas
margin-right	Mengatur jarak margin bagian kanan
margin-bottom	Mengatur jarak margin bagian bawah
margin-left	Mengatur jarak margin bagian kiri

B. Padding

Padding digunakan untuk memberikan ruang space disekitar elemen atau konten. Padding sendiri bisa diatur pada setiap sisi dengan properti: padding-top, padding-right, padding-bottom dan padding-left

#kuning {
    background-color: yellow;
}
#merah {
    background-color: red;
    padding: 15px 40px;
}
#hijau {
    background-color: green;
    padding: 30px 15px;
}

Padding individu
mengatur jarak padding untuk setiap sisi elemen:

• padding-top ( atas )
• padding-right ( kanan )
• padding-bottom ( bawah )
• padding-left ( kiri )

Semua properti padding dapat memiliki nilai berikut:

• Length – ukuran padding ditentukan dalam satuan seperti px, pt, cm, dll.
• % – menentukan padding sebagai persentase memungkinkannya untuk beradaptasi ketika ukuran layar berubah
• Inherit – menetapkan bahwa padding harus diwarisi dari elemen induknya

#kuning {
    background-color: yellow;
}
#hijau {
    background-color: green;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 80px;
}

Padding shorthand
Dngan cara ini dimungkinkan juga untuk menentukan semua properti padding dalam satu properti tunggal

#default {
    background-color: orange;
}
#merah {
    background-color: red;
    padding: 10px 20px 30px 40px;
}
#hijau {
    background-color: green;
    padding: 5px 10px 15px;
}
#biru {
    background-color: blue;
    padding: 15px 20px;
}
#kuning {
    background-color: yellow;
    padding: 30px;
}

Properti padding

Properti padding

Properti	Kegunaanya
padding	Mengatur semua properti padding dalam satu deklarasi
padding-top	Mengatur jarak padding bagian atas
padding-right	Mengatur jarak padding bagian kanan
padding-bottom	Mengatur jarak padding bagian bawah
padding-left	Mengatur jarak padding bagian kiri