Margin dalam CSS

Margin

Adalah jarak dari batas terluar satu elemen ke batas terluar elemen lainnya.

Terlihat pada gambar diatas bahwa margin adalah jarak ┬áborder luar dari tulisan “Kursus PHP a2fahmi.com” ke border luar dari tulisan “Kursus JAVA a2fahmi.com”.

Margin terdiri dari 5 property, yaitu:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • margin

Property margin-top

Digunakan untuk menentukan jarak atas elemen terhadap elemen lainnya.

Syntax:

margin-top:nilai;

Contoh:

Buatlah satu file HTML bernama margin_top.html dengan isi seperti berikut ini:

<html>

<head>

<title>Lagi Belajar Margin dalam CSS</title>

</head>

<body>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

<p style=”border:1px solid red;margin-top:70px”>Paragraph dengan margin atas 70px</p>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

</body>

</html>

Hasil:

Jalankan file diatas melalui browsermu dan lihat hasilnya.

Property margin-bottom

Digunakan untuk menentukan jarak bawah elemen terhadap elemen lainnya.

Syntax:

margin-bottom:nilai;

Contoh:

Buatlah satu file HTML bernama margin_bottom.html dengan isi seperti berikut ini:

<html> 

<head>

<title>Lagi Belajar Margin dalam CSS</title>

</head>

<body>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

<p style=”border:1px solid red;margin-bottom:70px”>Paragraph dengan margin bawah 70px</p>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

</body>

</html>

Hasil:

Jalankan file diatas melalui browsermu dan lihat hasilnya.

Property margin-right

Digunakan untuk menentukan jarak kanan elemen terhadap elemen lainnya.

Syntax:

margin-right:nilai;

Contoh:

Buatlah satu file HTML bernama margin_right.html dengan isi seperti berikut ini:

<html> 

<head>

<title>Lagi Belajar Margin dalam CSS</title>

</head>

<body>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

<p style=”border:1px solid red;margin-right:50%”>Paragraph dengan margin kanan 50%</p>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

</body>

</html>

Hasil:

Jalankan file diatas melalui browsermu dan lihat hasilnya.

Property margin-left

Digunakan untuk menentukan jarak kiri elemen terhadap elemen lainnya.

Syntax:

margin-left:nilai;

Contoh:

Buatlah satu file HTML bernama margin_left.html dengan isi seperti berikut ini:

<html> 

<head>

<title>Lagi Belajar Margin dalam CSS</title>

</head>

<body>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

<p style=”border:1px solid red;margin-left:50%”>Paragraph dengan margin kiri 50%</p>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

</body>

</html>

Hasil:

Jalankan file diatas melalui browsermu dan lihat hasilnya.

Property margin

Digunakan untuk menentukan semua property margin diatas dalam satu deklarasi.

Syntax:

margin:atas kanan bawah kiri;

Contoh:

Buatlah satu file HTML bernama margin.html dengan isi seperti berikut ini:

<html> 

<head>

<title>Lagi Belajar Margin dalam CSS</title>

</head>

<body>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

<p style=”border:1px solid red;margin:10px 25% 40px 25%”>Paragraph dengan semua margin</p>

<p style=”border:1px solid blue”>Paragraph tanpa margin</p>

</body>

</html>

Hasil:

Jalankan file diatas melalui browsermu dan lihat hasilnya.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *