Pengertian Padding adalah jarak antara konten dengan border. Pemberian jarak ini akan mempertegas antara konten sebuah konten. Karena dengan posisi konten dengan border yang terlalu mepet tidak akan terlalu indah dilihat. Nanti kita akan lihat contohnya.
Contoh dan format penulisan padding adalah cukup dengan padding: value; value bisa digunakan angka dengan satuan pixel dan em. Sebagai contoh bisa dijalankan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.tanpapadding { width: 150px;height:150px;
border: 2px dotted blue;
}
.denganpadding {width: 150px;height:150px;
border: 2px dotted blue;
padding: 10px;
}
</style>
</head>
<body>
<img class="tanpapadding" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwAYr9-SuA4VxrUj_XJix5xmPB8RUxE_PtULoFGpHC5uO1cDX-5qBK9AbTKSlai08mIBIJRv28eV502-BuJ-8fz6YTGRGYUKKZWv5_BD8IKDKMIjS19mP4jVb0b7VB-qwbXCMdrH6VT4/s320/analisis+statistik.jpg" /><br/>
<img class="denganpadding" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwAYr9-SuA4VxrUj_XJix5xmPB8RUxE_PtULoFGpHC5uO1cDX-5qBK9AbTKSlai08mIBIJRv28eV502-BuJ-8fz6YTGRGYUKKZWv5_BD8IKDKMIjS19mP4jVb0b7VB-qwbXCMdrH6VT4/s320/analisis+statistik.jpg" />
</body>
</html>
Bisa dibandngkan bagaimana sebuah gambar dengan padding dan tanpa padding. Dari tampilan di atas.
Kemudian untuk customize padding juga bisa digunakan untuk masing masing sisi. Misalkan bagian kanan ingin padding 5px, kiri 3px, atas 2px adn bawah 1px. Caranya cukup dengan menambakan menambahkan right, left,top dan bottom saja. Contoh penulisannya :
<style>
p {
border: 2px solid red;
padding-top: 5x;
padding-right: 3px;
padding-bottom: 20px;
padding-left: 1px;
}
</style>
Namun pada penulisan modern bisa digunakan penulisan yang lebih singkat. penulisan ini disebutkan dengan nama Sortland Notation.
Contoh dan format penulisan padding adalah cukup dengan padding: value; value bisa digunakan angka dengan satuan pixel dan em. Sebagai contoh bisa dijalankan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.tanpapadding { width: 150px;height:150px;
border: 2px dotted blue;
}
.denganpadding {width: 150px;height:150px;
border: 2px dotted blue;
padding: 10px;
}
</style>
</head>
<body>
<img class="tanpapadding" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwAYr9-SuA4VxrUj_XJix5xmPB8RUxE_PtULoFGpHC5uO1cDX-5qBK9AbTKSlai08mIBIJRv28eV502-BuJ-8fz6YTGRGYUKKZWv5_BD8IKDKMIjS19mP4jVb0b7VB-qwbXCMdrH6VT4/s320/analisis+statistik.jpg" /><br/>
<img class="denganpadding" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwAYr9-SuA4VxrUj_XJix5xmPB8RUxE_PtULoFGpHC5uO1cDX-5qBK9AbTKSlai08mIBIJRv28eV502-BuJ-8fz6YTGRGYUKKZWv5_BD8IKDKMIjS19mP4jVb0b7VB-qwbXCMdrH6VT4/s320/analisis+statistik.jpg" />
</body>
</html>
Kemudian untuk customize padding juga bisa digunakan untuk masing masing sisi. Misalkan bagian kanan ingin padding 5px, kiri 3px, atas 2px adn bawah 1px. Caranya cukup dengan menambakan menambahkan right, left,top dan bottom saja. Contoh penulisannya :
<style>
p {
border: 2px solid red;
padding-top: 5x;
padding-right: 3px;
padding-bottom: 20px;
padding-left: 1px;
}
</style>
Namun pada penulisan modern bisa digunakan penulisan yang lebih singkat. penulisan ini disebutkan dengan nama Sortland Notation.
- Penulian padding : 6px 4px ; ini artinya nilai padding-top 6px ; padding-right : 4px; padding-bottom:6px ;padding-left: 4px; Dengan kata lain jika ditulis 2 angka, maka angka pertama untuk atas-bawah dan angka ke 2 untuk kiri-kanan.
- Penulisan padding: 3px 5px 7px; senilai dengan padding-top:3px ; padding-right:5px; padding-bottom: 7px. Sementara untuk left akan mengikuti kanan.
- Penulisan padding : 1px 2px 3px 4px; Ini menunjukkan sudah ke empat sisi. Urutannya adalah searah jarum jam. Yaitu : atas - kanan - bawah - kiri.
Nah itulah cara penulisan padding dalam CSS. Semoga catatan ini membantu.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment