Tutorial Margin dan Padding pada CSS
Tutorial Margin dan Padding pada Bahasa Pemrograman CSS
 |
| Margin and Padding |
Pengertian Margin dan Padding
margin dan padding merupakan properti yang paling banyak digunkanan untuk mendesain sebuah halaman website. Karena margin dan padding digunkanan untuk mengatur lebar atau jarak antar sisi pada sebauah elemen Html. Sebelum admin membahas satu persatu coba teman-teman lihat gambar dibawah ini:
Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element, Properti ini berfungsi untuk mengatur jarak antar element. Ada beberapa sisi luar pada margin yakni :margin atas dituliskan pada CSS dengan syntak (margin-top), margin bawah (margin-bottom), margin kir (margin-left), margin kanan (margin-right).
Namun teman juga bisa menggabungkan semuanya dengan menuliskan (margin) saja. Syntak ini akan otomatis mengatur jarak sisi luar sebelah atas, bawah, kiri, kanan element.
Margin biasanya digunakan untuk mengatur jarak tulisan pada navbar atau tag body, hal ini biasanya disebut dengan container pada bootstrap. Untuk lebih jelasnya perhatikan contoh syntak berikut :
File index.html
<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS </title>
<style>
#margin1 {
background: yellow;
width: 200px;
margin: 50px;
}
#margin2 {
background: yellow;
width: 200px;
margin-left: 100px ;
}
</style>
</head>
<body>
<h1 id="margin1"> Belajar CSS </h1>
<h1 id="margin2"> Belajar Margin </h2>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<style>
#margin1 {
background: yellow;
width: 200px;
margin: 50px;
}
#margin2 {
background: yellow;
width: 200px;
margin-left: 100px ;
}
</style>
</head>
<body>
<h1 id="margin1"> Belajar CSS </h1>
<h1 id="margin2"> Belajar Margin </h2>
</body>
</html>
Jika syntak diatas dijalankan maka akan menampilkan seperti gambar berikut :
Mengenal Padding pada CSS
Padding adalah sisi dalam pada sebuah element. Kita bisa menggunakan properti padding untuk mengatur jarak pada sisi dalam pada sebuah element yang akan kita tentnukan.Padding sendiri banyak terdapat di bagian navbar, pembuatan tabel misalnya dan masih banyak lagi. Tergantung kebutuhan si programer itu sendiri.
Sama dengan margin, padding juga memiliki sisi-sisi sperti top, bottom, left, dan right. Yang dituliskan seperti (padding-top, padding-bottom, padding-left, pading-right). dan jika hanya menggunakan properti padding saja maka mengambil semua sisi. Berikut contoh penggunaan padding pada CSS :
File index.html
<!DOCTYPE html>
<html>
<head>
<title> Belajar CSS </title>
<style>
p {
background: yellow;
display: inline-block;
padding: 50px;
}
#padding {
padding-left:0;
}
</style>
</head>
<body>
<p> BELAJAR CSS </p>
<p> HOME </p>
<p id="padding"> ABOUT </p>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<style>
p {
background: yellow;
display: inline-block;
padding: 50px;
}
#padding {
padding-left:0;
}
</style>
</head>
<body>
<p> BELAJAR CSS </p>
<p> HOME </p>
<p id="padding"> ABOUT </p>
</body>
</html>
Syntak diatas akan menampilkan sebagai berikut :
Terima kasih sudah membaca artikel tutorial margin dan padding pada CSS sampai akhir. Pada tutorial selanjutnya admin akan membahas tentang Tutorial properti border pada CSS.
0 Response to "Tutorial Margin dan Padding pada CSS"
Post a Comment