sesuai judul kita akan mencoba dan memahami apa itu padding dalam css, apa fungsi padding dalam css, dan bagaimana kita menerapkan padding dalam kode css untuk pembuatan suatu website. dan sebelum kita memulai dan mencoba izinkan saya terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillah atas segala nikmat yang telah di berikan Allah kepada diri ini, dan salah satu nikmat tersebut ialah hari ini masih diberi kesempatan lagi untuk
menulis dan berbagi dalam tulisan ini dengan kalian. tak lupa Sholawat serta salam saya haturkan kepada Sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada
keluarganya dan kepada para sahabatnya.
Alhamdulillah kali ini kita akan mencoba apa yang namanya padding kawan, bukan puding loh ya hehehehe.
padding adalah menurut saya batas tepian bagian dalam sebuah selektor dengan batas tepian isi atau konten sebuah selektor. jadi antara batas tepian selektor
dengan konten itu namanya padding. padding ini ada padding-top (batas bagian atas), padding-right (batas bagian kanan), padding-bottom (batas bagian bawah),
padding-left (batas bagian kiri). biar lebih menghemat tulisan dan waktu kita langsung terapkan dalam koding kita.
1. untuk yang sudah mengikuti dari tulisan kemaren, sekarang duplikat file kemaren biar punya simpanan data, kemudian buka file kemaren di notepad++. bagi yang baru
mengikuti atau membaca tulisan ini, ketik atau copy paste pada notepad++ nya kode css berikut
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:100%;background:#edfa1d ;margin:0px;padding-top:150px;}
dan copy paste kode html berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
</p>
</div>
</body>
</html>
dan dari kode diatas maka akan di dapat hasil seperti berikut
2. sehingga dari hasil diatas kita bisa menarik kesimpulan bahwa padding-top itu adalah batas tepian bagian dalam sebuah selektor dengan batas tepian isi atau
konten sebuah selektor pada bagian atas. dan pengertian padding-right itu untuk bagian kanan, padding-left untuk bagian kiri dan padding-bottom untuk bagian
bawah. kita langsung saja coba kode css berikut ini
body{margin:0px;}#main{border:1px solid blue;min-width:150px;width:100%;background:#edfa1d ;margin:0px;padding-top:150px;padding-right:50px;padding-bottom:120px;padding-left:75px;}
sehingga dari kode css diatas akan menghasilkan seperti berikut
3. dan padding ini bisa ditulis seperti berikut
padding:padding-top padding-right padding-bottom padding left;
sehingga jika diterapkan pada kode css akan menjadi seperti ini
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:100%;
background:#edfa1d ;
margin:0px;
padding:150px 50px 120px 75px;
}
maka hasil kode diatas akan sama hasilnya dengan hasil nomer 2.
4. dari tulisan diatas, mari kita perbagus tampilannya sehingga akan di dapat kode seperti berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
}
dan dari kode diatas akan menghasilkan output seperti berikut.
mudah-mudahan dari tulisan ini kita bisa mengambil manfaatnya terutama dan khususnya buat saya, aamiiin.
dan kita lanjut di next tulisan kawan.
salam sobat semua
#css #html #free #share #web #website #websites #berbagi #gratis #padding #top #left #right #bottom
Komentar
Posting Komentar