Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 10 : Margin pada CSS

By Web Design Purbalingga Post a Comment

Margin pada CSS – Margin merupakan salah satu property dari css yang cukup populer dan bahkan sering digunakan. Properti margin digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.

Margin pada CSS

Untuk lebih jelasnya, kalian bisa perhatikan contoh ilustrasi berikut


Jadi, arti sederhana dari margin itu adalah jarak elemen dengan ujung dari area elemen itu sendiri. Atau bisa juga di artikan, jika kalian ingin memberikan ruang antara elemen dengan area sekitar elemen, maka gunakan property margin. Mari kita coba contohnya berikut ini
Ketikan kode html berikut ini pada file html kalian
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Belajar Web Design di WebDesignPurbalingga</p>
</body>
</html>
Dan tambahkan kode css di bawah ini pada file css kalian dan tampilkan hasilnya di browser kalian
/*margin 50pixel*/
p {
 border: 1px solid grey;
 background-color: teal;
 margin: 50px;
}
Pada contoh di atas, nilai dari property margin diberi nilai 50 pixel. Kalian bisa mencoba dengan nilai lain.
Ada beberapa poin yang perlu di ingat mengenai property margin;
- Property margin bisa digunakan untuk mengatur setiap bagian sisi elemen seperti sisi kiri, kanan, atas dan bawah.
- Setiap sisi margin dapat di beri nilai berupa auto, length, %, inherit dan juga bisa menggunakan nilai negativ.
Lihat contohnya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Paragraf ini memiliki margin-top 80 pixel, margin-bottom 80 pixel, margin-right 120 pixel dan margin-left 200 pixel </p>
</body>
</html>

Dan tambahkan CSSnya
p {
 border: 1px solid teal;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-right: 120px;
    margin-left: 200px;
    background-color: aqua;
}
Jangan lupa save dan tampilkan di browser kalian.
Silahkan berkreasi dengan modal margin, agar bisa lebih paham tentang materi ini. Sekian materi kali ini tentang Margin pada CSS, semoga bermanfaat. Sampai jumpa di materi pertemuan berikutnya.

Post a Comment for "Materi 10 : Margin pada CSS"