padding-top. Sebagai jarak dalam sebelah atas elemen.
padding-right. Sebagai jarak dalam sebelah kanan elemen.
padding-bottom. Sebagai jarak dalam sebelah bawah elemen.
padding-left. Sebagai jarak dalam sebelah atas kiri.
Semua propeti padding memiliki nilai yaitu :
length – menentukan padding dalam bentuk px, pt, cm, dll.
% – menentukan padding dalam bentuk % dari lebar elemen.
inherit – menentukan padding dari induk tag.
Catatan : Untuk padding ini nilai negatif tidak diperkenankan
Contoh Progam padding berbeda dengan elemen
:
Individu Side
Paragraf dan seterusnya setelah diubah.
Shorthand Properti
Properti ini untuk mempersingkat kode dengan semua properti jadi 1 properti.
Padding Shorthand mempunyai propeti :
padding-top. Sebagai jarak dalam sebelah atas elemen.
padding-right. Sebagai jarak dalam sebelah kanan elemen.
padding-bottom. Sebagai jarak dalam sebelah bawah
elemen.
padding-left. Sebagai jarak dalam sebelah atas kiri.
Jika padding memiliki 4 nilai maka syntax dan penjelasannya :
padding: 27px 52px 77px 102px;
top padding adalah 27px.
right padding adalah 52px.
bottom padding adalah 77px.
left padding adalah 102px.
Contoh CSS Padding Shorthand
4 Value
Paragraf yang telah di ubah stylenya.
Jika memiliki 3 nilai maka syntax dan penjelasannya :
padding: 32px 55px 83px;
top padding adalah 32px.
right and left padding adalah 55px.
bottom padding adalah 83px.
3 Value
Paragraf yang telah di ubah stylenya.
Jika memiliki 2 nilai maka syntax dan penjelasannya :
padding: 32px 55px;
top dan bottom padding adalah 32px.
right dan left padding adalah 55px.
2 Value
Paragraf yang telah di ubah stylenya.
Jika memiliki 1 nilai maka syntax dan penjelasannya :
padding: 30px;
Semua padding 4 adalah 30px.
1 Value
Paragraf yang telah di ubah stylenya.
Padding dan Element Width ( box-sizing )
Properti ini digunakan mengatur box model yang artinya bisa membuat box model dalam elemen ini
Contoh ini elemen
diberi lebar 300px. Namun, lebar sebenarnya dari elemen
adalah 360px
(300px + 30px bantalan kiri + 30px bantalan kanan) :
Padding Element Width
Paragraf kedua dengan class coba.
Paragraf kedua dengan class coba1.
Untuk mengatasi lebar pada 300px, tidak peduli jumlah padding, Anda dapat menggunakan properti ukuran kotak ( box-sizing ). Dengan ( box-sizing ) maka akan dibuatkan secara otomatis.
Contoh ini, menggunakan properti ukuran kotak untuk mengatasi 300px :
Box Border
Paragraf kedua dengan class coba.
Paragraf kedua dengan class coba1.
Semua CSS Padding Properti
Properti
Deskripsi
padding
Properti untuk mempersingkat 4 properti dalam 1 properti.
padding-bottom
Mengatur padding bagian bawah elemen.
padding-left
Mengatur padding kiri suatu elemen.
padding-right
Mengatur padding kanan suatu elemen.
padding-top
Mengatur padding atas suatu elemen.
Padding di CSS untuk apa?
Pengertian padding adalah sebutan untuk spasi atau ruang di antara konten dan batas pada Cascading Style Sheet (CSS) dalam website . CSS ini berfungsi untuk mengatur tampilan elemen yang tertulis dan juga memisahkan konten dari tampilan visual dalam sebuah website.
Apa itu margin dan Padding di CSS?
Pada dasarnya, margin adalah ruang di sekitar elemen dan padding mengacu pada ruang antara elemen dan konten di dalamnya. Bisa kita lihat pada gambar diatas, Margin berada di luar dua elemen yang berdekatan. Setiap sisi elemen memiliki ukuran margin yang dapat kamu ubah satu per satu.
Apa beda padding dan margin?
Margin adalah mengatur jarak dari luar. Padding adalah mengatur jarak dari dalam.
Bagaimana konsep margin pada CSS?
margin digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Margin memiliki 4 macam penjabaran yang dapat digunakan secara terpisah sendiri-sendiri, yaitu: margin-top , margin-right , margin-bottom dan margin-left .
