Marjin Dalam CSS

Margin internal elemen ini adalah 70px.

Marjin Dalam CSS

CSS padding Atribut digunakan untuk menghasilkan ruang sekitar konten elemen di dalam batas yang ditentukan.

Dengan CSS, Anda dapat mengawasi sepenuhnya margin internal (isian). Beberapa atribut dapat menetapkan margin internal untuk setiap sisi (atas, kanan, bawah, dan kiri) elemen.

Padding - Sisi yang terpisah

CSS memiliki atribut untuk menentukan margin internal untuk setiap sisi elemen:

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

Semua atribut margin internal dapat diset dengan nilai berikut:

  • length - Tentukan margin internal dalam unit px, pt, cm, dll.
  • % - Tentukan margin internal dalam persen lebar elemen yang disertai
  • inherit - Tentukan untuk mewarisi margin internal dari elemen induk

Petunjuk:Tidak diizinkan nilai negatif.

Contoh

Atur margin internal untuk empat sisi <div> yang berbeda:

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

Coba sendiri

Padding - Atribut singkat

Untuk mengurangi kode, dapat menentukan semua properti margin internal dalam satu atribut.

padding Atribut adalah atribut singkat untuk berbagai atribut jarak dalam di bawah ini:

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

Prinsip kerjanya adalah seperti ini:

Jika padding Atribut memiliki empat nilai:

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

Contoh

Gunakan atribut singkat padding yang menentukan empat nilai:

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

Coba sendiri

Jika padding Atribut menentukan tiga nilai:

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

Contoh

Gunakan atribut singkat padding yang menentukan tiga nilai:

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

Coba sendiri

Jika padding Atribut menentukan dua nilai:

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

Contoh

Gunakan atribut singkat padding yang menentukan dua nilai:

div {
  padding: 25px 50px;
}

Coba sendiri

Jika padding Atribut menentukan nilai:

  • padding: 25px;
    • Seluruh empat jarak dalam adalah 25px

Contoh

Gunakan atribut singkat padding yang menentukan nilai:

div {
  padding: 25px;
}

Coba sendiri

Jarak dalam dan lebar elemen

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

Jadi, jika elemen memiliki lebar yang ditentukan, penambahan jarak dalam akan ditambahkan ke lebar total elemen. Ini biasanya bukan hasil yang diinginkan.

Contoh

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

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

Coba sendiri

Untuk mempertahankan lebar 300px, tanpa mengira isian, Anda dapat menggunakan box-sizing Atribut ini akan menyebabkan elemen tetap mempertahankan lebarnya. Jika menambahkan jarak dalam, ruang konten yang tersedia akan berkurang.

Contoh

Gunakan atribut box-sizing untuk mempertahankan lebar 300px, tanpa mengira isian:

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

Coba sendiri

Beberapa contoh lain

Atur jarak dalam kiri
Contoh ini menunjukkan bagaimana mengatur jarak dalam kiri elemen <p>.
Atur jarak dalam kanan
Contoh ini menunjukkan bagaimana mengatur jarak dalam kanan elemen <p>.
Atur jarak dalam atas
Contoh ini menunjukkan bagaimana mengatur jarak dalam atas elemen <p>.
Atur jarak dalam bawah
Contoh ini menunjukkan bagaimana mengatur jarak dalam bawah elemen <p>.

Semua atribut jarak dalam CSS

Atribut Deskripsi
padding Atribut singkat untuk mengatur semua properti jarak dalam dalam satu pernyataan.
padding-bottom Atur jarak dalam bawah elemen.
padding-left Atur jarak dalam kiri elemen.
padding-right Atur padat kanan internal elemen.
padding-top Atur padat atas internal elemen.

Bacaan lanjutan

Buku Tambahan:Model Bok: Padat Luar CSS