Mengenal Fungsi Propertis Css Margin

Tanggal : 25 Aug 2018, Category : Belajar CSS, Create By : admin

Kata margin sering kita dengar dan gunakan, seperti dalam penggunaan aplikasi office tentunya anda familiar dengan margin, apa itu margin. Margin dalam bahasa indonesia bisa di artikan sebagai (batas), jika di aplikasi word anda menggunakan margin untuk memberi batas atau jarak antara tepi kertas dan text, sama seperti di aplikasi office, margin di css berfungsi sama yaitu memberi jarak atau batas antar elemnet. 

Fungsi Margin Css

Margin sendiri berfungsi untuk memberi jarak antar element baik itu element div, p, table, dll. Dalam bahasa css margin memiliki beberapa kerabat yaitu margin top, margin bottom, margin left dan margin right, untuk itu kami akan membahas satu persatu dari masing - masing value.

Margin

Pertama adalah margin sendiri, jika anda hanya menggunakan propertis margin sendiri secara default anda berarti memberi margin ke seluruh penjuru, baik itu margin left, margin right, margin top, margin bottom, berikut contohnya.

Sebelum ditambah margin 

<div class="divsangkar">
  <div> Mengenal Fungsi Propertis Css Margin </div>

  <div class="divisi"> Element 2 </div>
  <div class="divisi"> Utama </div>
  <div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

output

Penambahan propertis margin 

<div class="divsangkar">
<div> Mengenal Fungsi Propertis Css Margin </div>

<div class="divisi"> Element 2 </div>
<div class="divisi" style="margin:20px"> Utama </div>
<div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

Penambahan propertis hanya menggunakan margin:20px maka secara default akan memberi margin left, margin right, margin top, margin bottom sebanyak 20px, berikut tampilanya.

Dari gambar di atas pemberian margin di div utama memberi efek jarak pada element lainya.

Margin Left

Selanjutnya adalah margin left digunakan untuk memberi jarak pada sisi kiri element dengan element utama, berikut contoh script dan hasilnya.

<div class="divsangkar">
<div> Mengenal Fungsi Propertis Css Margin </div>

<div class="divisi"> Element 2 </div>
<div class="divisi" style="margin-left:20px"> Utama </div>
<div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

Dari script diatas maka elemet utama memberi jarak terhadap element sisi kiri (emelent 2) 

Margin Right

Margin right digunakan untuk memberi jarak pada sisi kanan element dengan element utama, berikut contoh script.

<div class="divsangkar">
<div> Mengenal Fungsi Propertis Css Margin </div>

<div class="divisi"> Element 2 </div>
<div class="divisi" style="margin-right:20px"> Utama </div>
<div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

Margin Top

Margin top digunakan untuk memberi jarak pada sisi atas element dengan element utama, berikut contoh script.

<div class="divsangkar">
<div> Mengenal Fungsi Propertis Css Margin </div>

<div class="divisi"> Element 2 </div>
<div class="divisi" style="margin-top:20px"> Utama </div>
<div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

Margin Bottom

Margin top digunakan untuk memberi jarak pada sisi bawah element dengan element utama, berikut contoh script.

<div class="divsangkar">
<div> Mengenal Fungsi Propertis Css Margin </div>

<div class="divisi"> Element 2 </div>
<div class="divisi" style="margin-bottom:20px"> Utama </div>
<div class="divisi"> Element 3 </div>

<div class="clear"></div>
<div> Mengenal Fungsi Propertis Css Margin </div>
</div>

Beikut Sript untuk class yang di gunakan :

<style>
.divisi {
width:100px;
border:solid 1px;
height:100px;
float:left;
}
.divsangkar{
width:600px;
border:solid 1px;
height:600px;
}
.clear{
clear:both;
}
</style>

Mungkin sekian materi tentang properti css margin. Terimakasih Telah Berkunjung.


Keyword:
  • mengenal fungsi propertis css margin
  • css margin
  • css margin left
  • css margin right
  • css margin top
  • css margin bottom
  • margin left
  • margin right
  • margin top
  • margin bottom

Artikel Lain

Membuat Validasi Input Data Email Dan Url Website Php

Date : 25 Jul 2018, Category : Tutorial, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas tentang membuat validasi input data email dan url website php menggunakan filter_var dan preg_match, pada dasarnya tutorial validasi yang kami sampaikan hanya dasar .....

Menambah User Centos 7

Date : 28 Sep 2018, Category : Server, Create By : admin

Materi ini adalah materi pertama dalam kategori baru yaitu server, di kategori ini kita akan membahas mengenai konfigurasi server, sebagai programmer adakalanya kita di tuntut untuk mengetahui sedikit mengenai konfihurasi .....

Looping Array Javascript

Date : 28 Dec 2018, Category : Belajar JavaScript, Create By : admin

Looping adalah sebuah metode perulangan dimana bisanya perulangan tersebut akan menghasilakan sebuah data berurutan, misalkan looping angka numerik 1 sampai dengan 10 maka looping akan mencetak 1 2 3 4 .....