Langsung ke konten utama

belajar CSS dasar bersama part 8 : Mengenal dan mencoba tentang Properti Padding

 


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

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya