Marjin Dalam CSS

Marjin dalaman elemen ini adalah 70px.

Marjin Dalam CSS

CSS padding Properti untuk menghasilkan ruang di sekeliling kandungan elemen dalam batasan yang ditakrifkan.

Dengan CSS, anda boleh mengawal sepenuhnya marjin dalaman (isipan). Ada beberapa properti yang boleh menentukan marjin dalaman untuk setiap sisi (atas, kanan, bawah dan kiri) elemen.

Padding - Sisi individu

CSS mempunyai properti untuk menentukan marjin dalaman setiap sisi elemen:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Semua properti marjin dalaman boleh diatur dengan nilai berikut:

  • length - Tentukan marjin dalaman dengan unit seperti px, pt, cm dan sebagainya
  • % - Tentukan marjin dalaman berdasarkan peratus lebar elemen termasuk
  • inherit - Tentukan marjin dalaman yang diwarisi daripada elemen induk

Petikan:Tidak diizinkan nilai negatif.

Contoh

Atur marjin dalaman untuk empat sisi <div> berbeza:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Coba sendiri

Padding - Kepanduan singkatan

Untuk mengurangkan kod, boleh diwartakan semua properti marjin dalaman dalam satu properti.

padding Atribut adalah atribut singkatan untuk berbagai atribut jarak luar di bawah ini:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Prinsip kerja adalah seperti ini:

Jika padding Atribut memiliki empat nilai:

  • padding: 25px 50px 75px 100px;
    • Jarak luar atas adalah 25px
    • Jarak luar kanan adalah 50px
    • Jarak luar bawah adalah 75px
    • Jarak luar kiri adalah 100px

Contoh

Gunakan atribut singkatan padding yang telah diset nilai empat:

div {
  padding: 25px 50px 75px 100px;
}

Coba sendiri

Jika padding Atribut diset nilai tiga:

  • padding: 25px 50px 75px;
    • Jarak luar atas adalah 25px
    • Jarak luar kanan dan kiri adalah 50px
    • Jarak luar bawah adalah 75px

Contoh

Gunakan atribut singkatan padding yang telah diset nilai tiga:

div {
  padding: 25px 50px 75px;
}

Coba sendiri

Jika padding Atribut diset nilai dua:

  • padding: 25px 50px;
    • Jarak luar atas dan bawah adalah 25px
    • Jarak luar kanan dan kiri adalah 50px

Contoh

Gunakan atribut singkatan padding yang telah diset nilai dua:

div {
  padding: 25px 50px;
}

Coba sendiri

Jika padding Atribut diset nilai:

  • padding: 25px;
    • Empat jarak luar semua adalah 25px

Contoh

Gunakan atribut singkatan padding yang telah diset nilai:

div {
  padding: 25px;
}

Coba sendiri

Jarak luar dan lebar elemen

CSS width Atribut menentukan lebar area konten elemen. Area konten adalah bagian dalam elemen (model kotak) yang termasuk jarak luar, garis, dan jarak luar.

Sebagai akibatnya, jika elemen memiliki lebar yang ditentukan, penambahan jarak luar ke elemen akan ditambahkan ke lebar total elemen. Ini biasanya adalah hasil yang tidak diinginkan.

Contoh

Di sini, lebar elemen <div> adalah 300px. Tetapi, lebar sebenarnya elemen <div> akan menjadi 350px (300px + jarak luar kiri 25px + jarak luar kanan 25px):

div {
  width: 300px;
  padding: 25px;
}

Coba sendiri

Untuk mempertahankan lebar 300px, tidak peduli ukuran isian, Anda dapat menggunakan box-sizing Atribut. Ini akan mengakibatkan elemen tetap mempertahankan lebarnya. Jika menambahkan jarak luar, ruang isian yang tersedia akan berkurang.

Contoh

Gunakan atribut box-sizing untuk mempertahankan lebar 300px, tidak peduli ukuran isian:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Coba sendiri

Contoh lainnya

Tetapkan jarak luar kiri
Contoh ini menunjukkan bagaimana untuk menetapkan jarak luar kiri elemen <p>.
Tetapkan jarak luar kanan
Contoh ini menunjukkan bagaimana untuk menetapkan jarak luar kanan elemen <p>.
Tetapkan jarak luar atas
Contoh ini menunjukkan bagaimana untuk menetapkan jarak luar atas elemen <p>.
Tetapkan jarak luar bawah
Contoh ini menunjukkan bagaimana untuk menetapkan jarak luar bawah elemen <p>.

Semua atribut jarak luar CSS

Atribut Deskripsi
padding Atribut singkatan untuk menetapkan semua atribut jarak luar dalam satu pernyataan.
padding-bottom Tetapkan jarak luar bawah elemen.
padding-left Tetapkan jarak luar kiri elemen.
padding-right Tetapkan padat dalam kanan elemen.
padding-top Tetapkan padat dalam atas elemen.

Bacaan Tambahan

Buku Tambahan:Model Bok: Padat Dalam CSS