TUTORIAL CSS ( CASCADING STYLE SHEET ) PENGUNAAN MARGIN DAN PADDING
Assalamualaikum wr.wb
Selamat pagi sahabat blogeer , di pagi yang cerah ini mudah-mudahan kita diberikan kesehatan, kebugaran, dan lancar semua urusan kita. Amin ?
Kali ini Belajar di Perantauan akan membahasa tentang cara pengguanaan MARGIN dan PADDING, pasti teman-teman pernahkan menemukan kata-kata ini, ketika kita belajar css atau ketika kita melihat tutorial css pasti ada yang nama margin dan padding, tapi apakah kita tahu apa maksud dari margin dan padding ini, rasa penasaran yang mendalam membuat saya ingin menuliskan ini pada pagi hari ini buat teman-teman semua . OK
CSS ( Cascading Style Sheet ) adalah mekanisme memisahkan antara isi dan presentasi dokumen HTML. CSS menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman. CSS bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen HTML yang di berikan. Warna, Font, Text Size, Background, susunan elemen pada halaman dan seluruh aspek presentasi isi, di atur oleh CSS.
1. MARGIN
Properti margin di gunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak <div> dan tag-tag HTML lainya.
Sebagai contoh :
<div class=�box�>
Box ke satu
</div>
<div class=�box�>
Box ke satu
</div>
Ingat, tambahkan kode tersebut pada struktur HTML standar yang memiliki <HTML>,<HEAD> dan seterusnya.
Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :
<!DOCTYPE html>
<html>
<head>
<title>PENGUNAAN MARGIN</title>
<style>
.box{
background-color: green;
color: yellow;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="box">
ini box ke satu Belajar di Perantauan
</div>
<div class="box">
ini box ke dua Belajar di Perantauan
</div>
</body>
</html>
<html>
<head>
<title>PENGUNAAN MARGIN</title>
<style>
.box{
background-color: green;
color: yellow;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="box">
ini box ke satu Belajar di Perantauan
</div>
<div class="box">
ini box ke dua Belajar di Perantauan
</div>
</body>
</html>
Berikut tampilan yang akan di dapatkan :
Jarak antara box satu dan box dua sedikit berjauhan karena kita menambahkan margi bawah ( margin-buttom ) sebesar 50px.
Untuk melihat perbedaan ketika kita memberikan margin atau tidak, teman-teman dapat menghapus property margin-buttom dan perhatikan perbedaannya.
Teman-teman juga dapat memberikan jarak dari kanan(right),kiri (left),dan atas (top). Misalnya :
Margin-top : 20px;
Margin-right : 30px;
Margin-buttom : 40px;
Margin-left : 50px;
1. PADDING
Untuk property padding kita akan memberikan jarak anatara konten elemen dengan elemen tersebut. Sebagai contoh tambahkan kode CSS berikut, pada class box yang kita buat sebelumnya:
<!DOCTYPE html>
<html>
<head>
<title>PENGUNAAN MARGIN</title>
<style>
.box{
background-color: green;
color: yellow;
width: 80px;
height: 100px;
margin-bottom: 50px;
padding-left: 20
}
</style>
</head>
<body>
<div class="box">
ini box ke satu Belajar di Perantauan
</div>
<div class="box">
ini box ke dua Belajar di Perantauan
</div>
</body>
</html>
<html>
<head>
<title>PENGUNAAN MARGIN</title>
<style>
.box{
background-color: green;
color: yellow;
width: 80px;
height: 100px;
margin-bottom: 50px;
padding-left: 20
}
</style>
</head>
<body>
<div class="box">
ini box ke satu Belajar di Perantauan
</div>
<div class="box">
ini box ke dua Belajar di Perantauan
</div>
</body>
</html>
Dan sekarang teman-teman dapat melihat jarak antara text yang berada di dalam box. Perlu di perhatikan juga, bahwa ketika kita menmbahkan padding, ukuran box juga akan berubah. Misalnya kita menentukan ukuran lebar tetap 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari box tersebut menjadi 120px.
Jadi jika teman-teman ingin ukuran box tetap 100px, kita harus menghitung ulang width dari box tersebut. Misalnya kita ubah menjadi 80px, dengan begitu, 80px + 20px menjadi 100px.
Na bagaimana teman-teman blogger ku udah paham belum semoga bermamfaat ya, silahkan di share.
baca juga : cara membuat navbar di css
0 Response to "TUTORIAL CSS ( CASCADING STYLE SHEET ) PENGUNAAN MARGIN DAN PADDING"
Post a Comment