Margin CSS ~ KODELOVER

properti margin CSS mengatur ukuran spasi putih di luar batas.
Catatan Catatan: margin benar-benar transparan - dan tidak dapat memiliki warna latar belakang!

dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti CSS untuk menetapkan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

properti margin CSS

properti margin CSS digunakan untuk menghasilkan ruang di sekitar elemen.

properti margin mengatur ukuran ruang putih di luar perbatasan.

Elemen ini memiliki margin 80px.

margin - Sisi Individu

CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen:

    margin-top
    margin-right
    margin-bottom
    margin kiri

Semua properti margin bisa memiliki nilai berikut:

    auto - browser menghitung margin
    length - menentukan margin dalam px, pt, cm, dll.
    % - menentukan margin dalam% dari width elemen yang mengandung
    inherit - menentukan bahwa margin harus diwarisi dari elemen induk

Catatan Catatan: Hal ini juga memungkinkan untuk menggunakan nilai negatif untuk margin; Untuk tumpang tindih konten

Contoh berikut menetapkan margin yang berbeda untuk keempat sisi elemen <p>:
Contoh

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

Contoh berikut memungkinkan margin kiri diwarisi dari elemen induk:
Contoh

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

margin - properti Shorthand

Untuk mempersingkat kode, Anda bisa menentukan semua properti margin dalam satu properti.

properti margin adalah properti singkatan untuk properti margin individu berikut:

    margin-top
    margin-right
    margin-bottom
    margin left

Contoh
p {
    margin: 100px 150px 100px 80px;
}

Jadi, begini cara kerjanya:

Jika properti margin memiliki empat nilai:

    margin: 25px 50px 75px 100px;
        margin atas adalah 25px
        margin kanan adalah 50px
        margin bawah 75px
        margin kiri adalah 100px

Jika properti margin memiliki tiga nilai:

    margin: 25px 50px 75px;
        margin atas adalah 25px
        margin kanan dan kiri adalah 50px
        margin bawah 75px

Jika properti margin memiliki dua nilai:

    margin: 25px 50px;
        margin atas dan bawah adalah 25px
        margin kanan dan kiri adalah 50px

Jika properti margin memiliki satu nilai:

    margin: 25px;
        Keempat margin adalah 25px

penggunaan Nilai Otomatis

Anda dapat mengatur properti margin menjadi otomatis untuk secara horizontal mengarahkan elemen ke dalam wadahnya.

Elemen kemudian akan mengambil width yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan:
Contoh

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

Semua properties margin CSS

margin properti > singkatan untuk menetapkan properti margin dalam satu deklarasi
margin-bottom > menetapkan margin bawah elemen
margin-left > mengatur margin kiri sebuah elemen
margin-right > mengatur margin elemen yang benar
margin-top > mengatur margin atas elemen

KODELOVER

Margin CSS

Related Post