tutorial pengembangan web terbaru
 

CSS margin

❮ Sebelumnya Berikutnya Bab ❯

CSS Margin Properti

CSS margin properti yang digunakan untuk menghasilkan ruang di sekitar elemen.

The margin sifat mengatur ukuran ruang putih LUAR perbatasan.

Elemen ini memiliki margin dari 80px.

CSS Margins

CSS margin sifat mengatur ukuran ruang putih LUAR perbatasan.

CatatanCatatan: margins -benar transparan - dan tidak bisa memiliki warna latar belakang!

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

Margin - Individual Sides

CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua margin properti dapat memiliki nilai berikut:

  • auto - browser menghitung margin
  • panjang - menetapkan margin di px, pt, cm , dll
  • % - Menetapkan margin di% dari lebar dari elemen yang mengandung
  • mewarisi - menetapkan bahwa margin harus diwarisi dari elemen induk
CatatanCatatan: Hal ini juga memungkinkan untuk menggunakan nilai negatif untuk margins ;tumpang tindih konten.

Contoh berikut menetapkan berbeda margins untuk semua empat sisi dari <p> elemen:

Contoh

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

Contoh berikut memungkinkan kiri margin diwariskan dari elemen induk:

Contoh

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

p.one {
    margin-left: inherit;
}
Cobalah sendiri "

Margin - Properti Steno

Untuk mempersingkat kode, adalah mungkin untuk menentukan semua margin properti dalam satu properti.

The margin properti adalah properti singkatan untuk individu berikut margin sifat:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Contoh

p {
    margin: 100px 150px 100px 80px;
}
Cobalah sendiri "

Jadi, di sini adalah cara kerjanya:

Jika margin menawarkan empat nilai:

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

Jika margin properti memiliki tiga nilai:

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

Jika margin properti memiliki dua nilai:

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

Jika margin menawarkan satu nilai:

  • margin : 25px;
    • keempat margin 25px

Penggunaan The auto Nilai

Anda dapat mengatur margin properti untuk auto ke horizontal pusat elemen dalam wadah.

Unsur kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi sama antara kiri dan kanan margins :

Contoh

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

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»

Semua CSS Margin Properti

Milik Deskripsi
margin Sebuah properti singkat untuk menetapkan margin properti dalam satu deklarasi
margin-bottom Mengatur bawah margin dari elemen
margin-left Set kiri margin dari elemen
margin-right Menetapkan hak margin dari elemen
margin-top Set atas margin dari elemen

❮ Sebelumnya Berikutnya Bab ❯