CSS Part 6 : Pengertian Margin dan Cara Menggunaannya

Pengertian margin dan cara penggunaannya

ASSALAMUALAIKUM wr wb.

 apa kabar semuanya,kali ini saya akan membahas tentang margin sobat pasti pernah menggunakan csskan apa sobat tau kegunaan dari margin seperti apa kalau sobat masih bingung berikut penjelasannya.


1.Pengertian Margin.
Margin adalah untuk pemberi jarak atau batas  (bagian luar) pada tag html.

2.Maksud danTujuan.
 untuk lebih memahami apa itu margin dan mengetahui kegunaannya.

3.Bahan dan Alat.
 - laptop/pc
 -web browser contohnya seperti mozilla fire fox atau yang lain
 -memiliki aplikasi seperti sublime text/notepad

4.Materi Tentang Margin.
CSS memberikan kita kemampuan penuh untuk mengatur jarak atau batas (bagian luar)  pada tag HTML.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Margin antara lain :

Margin mempunyai bagian - bagian atau properti antara lain :
  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left
Sedangkan nilai atau value dari margin antara lain :

   - % (percent) - Menentukan margin dalam% dari lebar elemen yang mengandung

   - auto - - browser menghitung margin

   -px (pixel)  Em, in dan pt - - menentukan panjang margin

berikut penjelasan diatas:

   1.margin-top; berfungsi untuk memberi jarak pada bagian atas.
berikut contoh script dari margin-top:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border: 12px groove #ea4328;
    margin-top: 120px;
}
</style>
</head>
<body>
<p>
CSS memberikan kita kemampuan penuh untuk mengatur jarak atau batas (bagian luar)  pada tag HTML.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Margin antara lain :

</p>
</body>
</html>
ini hasil dari script diatas:


2.margin-right; berfungsi untuk memberi jarak pada bagian kanan
berikut contoh script dari margin-right:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border: 12px groove #ea4328;
    margin-right: 160px;
}
</style>
</head>
<body>
<p>
CSS memberikan kita kemampuan penuh untuk mengatur jarak atau batas (bagian luar)  pada tag HTML.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Margin antara lain :

</p>
</body>
</html>

berikut hasilnya dari sintaks diatas:



3.margin-left; berfungsi untuk memberi jarak pada bagian kiri
berikut contoh script dari margin-left:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border: 12px groove #ea4328;
    margin-left: 160px;
}
</style>
</head>
<body>
<p>
CSS memberikan kita kemampuan penuh untuk mengatur jarak atau batas (bagian luar)  pada tag HTML.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Margin antara lain :

</p>
</body>
</html>

ini hasilnya:



4.margin-bottom; berfungsi untuk memberi jarak pada bagian bawah
berikut contoh script dari margin-bottom:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border: 12px groove #ea4328;
    margin-bottom: 67px;
}
</style>
</head>
<body>
<p>
CSS memberikan kita kemampuan penuh untuk mengatur jarak atau batas (bagian luar)  pada tag HTML.

Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Margin antara lain :

</p>
</body>
</html>

ini hasilnya:



catatan dalam penggunaan margin dalam css:
1.Jika marginproperti memiliki empat nilai:

    margin: 25px 50px 75px 100px;
        margin atas adalah 25px
        margin kanan adalah 50px
        margin bawah adalah 75px
        margin kiri adalah 100px

2.Jika marginproperti memiliki tiga nilai:

    margin: 25px 50px 75px;
        margin atas adalah 25px
        margin kanan dan kiri adalah 50px
        margin bawah adalah 75px

3.Jika marginproperti memiliki dua nilai:

    margin: 25px 50px;
        margin atas dan bawah yang 25px
        margin kanan dan kiri adalah 50px

4.Jika marginproperti memiliki satu nilai:

    margin: 25px;
        keempat margin 25px

5.margin value auto
 mengatur properti margin auto untuk horizontal pusat elemen dalam wadah.Unsur kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi sama antara margin kiri dan kanan.

    terima kasih telah membaca artikel ini sekian dari saya semoga menambah ilmu.

     REFERENSI:
http://www.w3schools.com/css/css_margin.asp
http://www.duniailkom.com/tutorial-belajar-css-pengertian-margin-dan-fungsi-margin-dalam-css/

        WASSALAMUALAIKUM wr wb.

Komentar

Posting Komentar

Postingan populer dari blog ini

how to upgrade php5.6 ke php 7.0

Gambar
UPGRADE PHP5.6 KE PHP7.0 ASSALAMUALAIKUM wr wb.     pada artikel kali ini saya akan membahas tentang bagaimana mengupgrade php5.6 ke php7.0 1.PENGERTIAN.     php yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.  2.MAKSUD DAN TUJUAN.    untuk mengetahui fitur apa saja yang baru dari php7 dibandingan dengan php sebelumya. 3.ALAT DAN BAHAN. - laptop/komputer yang terinstall os linux. -koneksi internet.; -web browser. 4.WAKTU PELAKSANAAN.    sekitar kurang lebih 15 menit tergantung koneksi internet. 5.PEMBAHASAN.     kelebihan dan kekurangan php 1.kelebihan.             -Bisa membuat Web menjadi Dinamis.     -PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.     -Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Oper
Terus membaca

CSS Part 12: FONT CSS

Gambar
FONT CSS ASSALAMUALAIKUM wr wb.     apa kabar teman teman kali ini saya akan membahas tentang macam macam font teman teman yang pernah menggunakan ms word pasti pernah menggunakan jenis font apa tapi saya tidak membahas tentang ms word tapi font yang ada di css berikut artikel yang membahas tentang font. 1.Pengertian CSS Font.     metode untuk mengatur huruf pada elemen tag html. 2.MAKSUD dan TUJUAN.   untuk mengetahui cara penggunaan font. 3.BAHAN dan ALAT.  - laptop/pc  -web browser contohnya seperti mozilla fire fox atau yang lain  -memiliki aplikasi seperti sublime text/notepad  4.Materi CSS memberikan kita kemampuan penuh untuk mengatur jenis huruf elemen pada tag HTML. properti CSS yang berhubungan dengan yang digunakan dalam CSS font antara lain :         1.font family     2.font style     3.font size     4.font weight     5.font variant berikut contoh penerapan pada tag font diatas: 1.font family.     adalah tag yang digunakan untuk mengatur jenis pada h
Terus membaca

MENGANTI TAMPILAN THEME PADA WORDPRESS

Gambar
WORDPRESS ASSALAMUALAIKUM wr wb.    pada kesempatan kali ini saya akan menjelaskan bagaimana menganti tampilan theme pada wordpress. 1.PENGERTIAN.         adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). 2.MAKSUD DAN TUJUAN.        untuk bisa menganti tampilan wordpress sesuka kita. 3.ALAT DAN BAHAN.  -laptop/komputer.  -wordpress.  -web browser. 4.LAMA PELAKSANAAN.    sekitar 5 menit. 5.PELAKSANAAN.     1.buka web browser dan masuk ke wordpress. 2.pilih tampilan dan kilk tambahkan tema baru. 3.setelah pilih tema yang anda sukai dan klik install jika sudah klik aftifkan. 4.berikut hasil tampilan setelah diganti tampilan.     sekian dari artikel kali ini terima kasih telah berkunjung. WASSALAMUALAIKUM wr wb.
Terus membaca