Assalamu'alaikum Wr.Wb
PENGERTIAN
SleepingCodings - Margin dan Padding merupakan suatu kebutuhan bagi seorang programmer, seperti halnya orang yang hidup perlu makan dan benafas untuk memenuhi kebutuhan tubuhnya, jadi Margin dan CSS juga berperan untuk mengisi dan menutupi kekurangan dari pembuatan html yang jarak antara atas dan bawah, kiri dan kanan yang tidak rapi & rata.
MENGENAL MARGIN pada CSS
Margin adalah sisi luar dari sebuah element, misalnya temen" ingin mengatur jarak antar element. Temen" dapat mengaturnya dengan perintah margin maka secara otomatis kita sudah mengatur jarak atas, bawah, kanan, kiri. Nah, pasti ada yang bertanya bagaimana sih hanya mengatur jarak bawahnya saja atau jarak kanannya aja? , nah dalam margin ini terdapat 4 perintah lagi untuk mengatur secara 1 per 1 jaraknya.
Ada 4 syntax perintah yaitu :
- margin-top = margin atas atau untuk mengatur jarak luar bagian atas
- margin-right = margin kanan atau untuk mengatur jarak luar bagian kanan
- margin-bottom = margin bawah atau untuk mengatur jarak luar bagian bawah
- margin-left = margin kiri atau untuk mengatur jarak luar bagian kiri
Nah dari 4 syntax margin di atas kita hanya mengatur 1 opsi. Ada cara yang lebih gampang jika kita ingin mengatur 1 per 1 jarak antar element dengan hanya menuliskan perintah margin dan kita isi valuenya seperti ini :
margin : 4px 2px 8px 10px;
Nah, maksud dari penggunaan margin dg value berisi 4 variasi px ialah
- 4px merupakan cara untuk mengatur jarak luar bagian atas
- 2px merupakan cara untuk mengatur jarak luar bagian samping kanan
- 8px merupakan cara untuk mengatur jarak luar bagian bawah
- 10px merupakan cara untuk mengatur jarak luar bagian samping kiri
Nah, sekarang lebih gampang mana coba?
PENGGUNAAN MARGIN
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Margin CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div class="box">
<h1>Ini adalah box</h1>
</div>
<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>
</body>
</html>
style.css
.box{
background:blue;
height:200px;
width:300px;
margin:20px;
}
.box-dua{
background:red;
height:100px;
width:200px;
margin-left:70px;
}
Jika di jalankan di browser :
 |
| Gambar 1.1 Penggunaan dan Pengimplemetasian Margin |
MENGENAL PADDING pada CSS
Nah, Padding di sini merupakan sisi dalam dari sebuah element, kita bisa menggunakan syntax padding untuk mengatur sisi dalam sebuah element yang akan kita edit. Nah kegunaan Padding hampir sama dengan kegunaan Margin tp yang membedakan kedua syntax tersebut adalah Padding merupakan sisi dalam dari sebuah element, sedangkan Margin merupakan sisi luar dari sebuah element. Padding juga mempunyai 4 sisi seperti Margin, penulisannya juga sama yaitu "padding-top" dll. Nah berikut contoh penggunaan Padding pada CSS :
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Menerapkan Padding</h1>
<div class="theme-box">
<h1>Ini adalah Box yang memakai padding</h1>
</div>
<div class="template-box">
<h2>Ini adalah box yang tidak memakai padding</h2>
</div>
</body>
</html>
style.css
h1{
text-align:center;
}
.theme-box{
background:darkblue;
width:250px;
height:300px;
padding:20px;
color: #fff;
}
.template-box{
background:crimson;
width:250px;
height:300px;
color: darkgrey;
}
Nah, ini hasilnya ketika temen" lihat di web browser
 |
| Gambar 1.2 Penggunaan dan Pengimpletasian Padding |
KESIMPULAN
Nah, Penggunaan Margin dan Padding memiliki kesamaan dalam penggunaan syntaxnya. Khususnya dalam penulisannya, karena dalam Margin dan Padding ini sama" mempunyai 4 sisi untuk mengatur sisi luar ataupun dalam, sesuai kebutuhan. Nah, penulisannya juga sama persis yaitu jika kita ingin mengatur sisi luar bagian atas yaitu "margin-top", sedangkan jika kita ingin mengatur sisi bagian dalam yaitu "padding-top".
Semoga Bermanfaat ~
REFERENSI
No comments:
Post a Comment