Model Margin CSS

-



Halo kali ini saya akan membawakan materi menginai magin CSS adalah digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Materi kali ini dibagi menjadi 5 bagian yaitu:

1. Cara menggunakan Magin

2. Overlapping Margin

3. Negatif Margin

4. Auto Margin

5. Shorthand Margin

Buat html div sederhana seperti dibawah dengan menggunakan class pada masing-masing div

1. Cara Menggunakan Margin

<body>

    <div class="pertama">MERAH</div>
    <div class="kedua">HIJAU</div>

</body>

Beri Style pada masing-masing div yang diberi class

.pertama {
    width: 500px;
    height: 200px;
    background-color: red;
    margin-top: 100px;
    margin-right: 50px;
    margin-bottom: 100px;
    margin-left: 200px;
}    

.kedua {
    width: 500px;
    height: 200px;
    background-color: green;
}


Terlihat bahwa dibox merah terdapat jarak/margin terhadap sekitarnya. Bisa dilihat, jika kalian klik kanan lalu inspect maka akan terlihat pada box merah memiliki margin yang sesuai dengan yang kita berikan.


2. Overlapping Margin Jadi apabila ada margin yang overlapping/berlebih ukurannya, maka browser        akan menggunakan margin yang nilainya lebih besar. 

Beri Margin top/atas pada div kedua seperti dibawah.

.pertama {
    width: 500px;
    height: 200px;
    background-color: red;
    margin-top: 100px;
    margin-right: 50px;
    margin-bottom: 100px;
    margin-left: 200px;
}    

.kedua {
    width: 500px;
    height: 200px;
    background-color: green;
    margin-top: 90px;
}

Tidak akan terjadi apa-apa sebab nilai margin top pada div kedua tidak lebih besar dari margin bottom div pertama. Jadi kalo mau tetap ingin style pada div kedua maka nilainya harus lebih besar dari margin bottom div pertama.


Ubah terlebih dahulu div pertama dan kedua menjadi satu baris, Agar tidak ada margin default jika kita menggunakan inline block.

<body>

    <div class="pertama">MERAH</div><div class="kedua">HIJAU</div>

</body>

Lalu beri style inline block agar box yang ingin ditampilkan berada pada satu garis yang sama.

div {
    display: inline-block;
}

.pertama {
    width: 500px;
    height: 200px;
    background-color: red;
    margin-right: 50px;
}    

.kedua {
    width: 500px;
    height: 200px;
    background-color: green;
    margin-left: 40px;
}

Maka hasil tampilan magin right dan magin left akan bertambah. ini perbedaan jika kalian menggunakan inline block.



3. Negatif Margin adalah perintah berlawanan terhadap nilai atau perintah semestinya

Beri style pada masing-masing div seperti dibawah.

.pertama {
    width: 500px;
    height: 400px;
    background-color: red;
    margin-right: 50px;
}    

.kedua {
    width: 500px;
    height: 200px;
    background-color: green;
    margin-top: -250px;
    margin-left: 200px;
}

Jika kita mengunakan min pada ukuran px yang akan ditentukan maka div hijau akan naik.

4. Auto digunakan browser menghitung margin secara otomatis berdasarkan ruang yang tersisa di              dalam wadah.

Beri auto pada tiap div
.pertama {
    width: 500px;
    height: 400px;
    background-color: red;
    margin-right: auto;
    margin-left: auto;
}    

.kedua {
    width: 500px;
    height: 200px;
    background-color: green;
    margin-right: auto;
    margin-left: auto;
}

Maka kedua div akan berada pada tengah browser/website.



5. Shorthand dalah metode penulisan CSS untuk mempersingkat kode menjadi lebih pendek, ringkas, efisien, dan menghemat waktu

Jika kalian menggukan shorthand ini maka browser akan membaca 50px untuk top dan bottom sedangkan 40px untuk right dan left

.pertama {
    width: 500px;
    height: 400px;
    background-color: red;
    margin: 50px 40px;
}  

Maka 50px untuk top, 40px untuk right left dan 30px untuk bottom.

.pertama {
    width: 500px;
    height: 400px;
    background-color: red;
    margin: 50px 40px 30px;
}    

artinya 50px untuk top,40px untuk right,30px untuk bottom dan 20px untuk left.

.pertama {
    width: 500px;
    height: 400px;
    background-color: red;
    margin: 50px 40px 30px 20px;
}    

Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya