tutorial pengembangan web terbaru
 

CSS Lapisan

❮ Sebelumnya Bab selanjutnya ❯

CSS Padding Properti

CSS padding properti yang digunakan untuk menghasilkan ruang di sekitar konten.

The padding mengatur ukuran ruang putih antara isi elemen dan perbatasan elemen.

Elemen ini memiliki padding 50px.

CSS Padding

Sifat CSS Padding menentukan ruang putih antara isi elemen dan perbatasan elemen.

padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen.

CatatanCatatan: Padding dipengaruhi oleh warna latar belakang dari elemen!

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

Padding - Individual Sides

CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:

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

Semua padding dapat memiliki nilai berikut:

  • panjang - menetapkan padding di px, pt, cm , dll
  • % - Menentukan bantalan di% dari lebar elemen yang mengandung
  • mewarisi - menetapkan bahwa padding harus diwarisi dari elemen induk

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

Contoh

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Cobalah sendiri "

Padding - Properti Steno

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

The padding properti adalah properti singkatan untuk padding individu berikut:

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

Contoh

p {
    padding: 50px 30px 50px 80px;
}
Cobalah sendiri "

Jadi, di sini adalah cara kerjanya:

Jika padding properti memiliki empat nilai:

  • padding: 25px 50px 75px 100px;
    • padding atas adalah 25px
    • Padding tepat adalah 50px
    • Padding bawah adalah 75px
    • Padding kiri 100px

Jika padding properti memiliki tiga nilai:

  • padding: 25px 50px 75px;
    • padding atas adalah 25px
    • paddings kanan dan kiri adalah 50px
    • Padding bawah adalah 75px

Jika padding properti memiliki dua nilai:

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

Jika padding properti memiliki satu nilai:

  • padding: 25px;
    • keempat paddings adalah 25px
contoh

Contoh lebih

Semua padding dalam satu deklarasi
Contoh ini menunjukkan properti singkat untuk setting semua properti padding satu deklarasi, dapat memiliki dari satu sampai empat nilai.

Mengatur padding kiri
Contoh ini menunjukkan bagaimana untuk mengatur padding kiri dari <p> elemen.

Mengatur padding kanan
Contoh ini menunjukkan bagaimana untuk mengatur padding kanan dari <p> elemen.

Mengatur padding atas
Contoh ini menunjukkan bagaimana untuk mengatur padding atas sebuah <p> elemen.

Mengatur bawah bantalan
Contoh ini menunjukkan bagaimana untuk mengatur padding bawah dari <p> elemen.

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 »

Semua CSS Padding Properti

Milik Deskripsi
padding Sebuah properti singkat untuk setting semua properti padding satu deklarasi
padding-bottom Menetapkan padding bawah elemen
padding-left Menetapkan padding kiri elemen
padding-right Menetapkan padding kanan elemen
padding-top Menetapkan padding atas sebuah elemen

❮ Sebelumnya Bab selanjutnya ❯