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 perihal cara pengguanaan MARGIN dan PADDING, niscaya teman-teman pernahkan menemukan kata-kata ini, saat kita berguru css atau saat kita melihat tutorial css niscaya ada yang nama margin dan padding, tapi apakah kita tahu apa maksud dari margin dan padding ini, rasa ingin tau yang mendalam menciptakan aku ingin menuliskan ini pada pagi hari ini buat teman-teman semua . OK
CSS ( Cascading Style Sheet ) ialah 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 memperlihatkan jarak antar elemen/tag HTML. Misalnya jarak <div> dan tag-tag HTML lainya.
Sebagai referensi :
<div class=”box”>
Box ke satu
</div>
<div class=”box”>
Box ke satu
</div>
Ingat, tambahkan instruksi tersebut pada struktur HTML standar yang mempunyai <HTML>,<HEAD> dan seterusnya.
Lalu tambahkan tag style dalam tag head, dan ketikkan instruksi 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 alasannya kita menambahkan margi bawah ( margin-buttom ) sebesar 50px.
Untuk melihat perbedaan saat kita memberikan margin atau tidak, teman-teman sanggup menghapus property margin-buttom dan perhatikan perbedaannya.
Teman-teman juga sanggup memperlihatkan 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 memperlihatkan jarak anatara konten elemen dengan elemen tersebut. Sebagai referensi tambahkan instruksi 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 kini teman-teman sanggup melihat jarak antara text yang berada di dalam box. Perlu di perhatikan juga, bahwa saat kita menmbahkan padding, ukuran box juga akan berubah. Misalnya kita memilih ukuran lebar tetap 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari box tersebut menjadi 120px.
Jadi kalau 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 supaya bermamfaat ya, silahkan di share.
baca juga : cara menciptakan navbar di css
EmoticonEmoticon