Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML dalam contoh sebelumnya jarak antar <div>, namun coba perhatikan antara text (Box ke x) dengan garis pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box tersebut. Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen dengan elemen tersebut.Padding CSS
Sebagai contoh tambahkan kode CSS berikut, pada class box yang kita buat sebelumnya:
padding-left:100px;
Tersedia di Bacacoding:
.box{
background-color:blue;
color: white;
width:100px;
height:100px;
margin-bottom:50px;
padding-left:100px;
}
Dan sekarang, anda dapat melihat jarak antara text yang berada di dalam box.
Perlu diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box juga akan berubah. Misalnya kita menentukan ukuran lebar dari .box sebesar 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari .box tersebut menjadi 120px.
Jadi jika anda ingin ukuran .box tetap 100px, kita harus menghitung ulang width dari box tersebut. Misalnya kita ubah menjadi 80px. Dengan begitu, 80px + 20px menjadi 100px.
Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memberi Jarak Konten/isi Elemen dengan CSS? Mungkin itu saja tulisan yang membahas tentang Cara Memberi Jarak Konten/isi Elemen dengan CSS, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon