Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah website dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element. untuk itu pada tutorial belajar CSS Dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa itu margin? apa itu padding? dan bagaimana cara penggunaannya pada CSS.
Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element. berikut ini adalah Contoh penggunaan margin pada CSS
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Margin CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1>Ini adalah box</h1>
</div>
<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>
</body>
</html>
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}
.box-dua{
background: red;
height: 100px;
width: 200px;
margin-left: 70px;
}
mengenal margin pada css
perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau jarak luar segala sisi sebesar 20px.
Mengenal Padding pada CSS
Padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’ adalah sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian dalam. berikut ini adalah Contoh penggunaan padding pada CSS
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Padding CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>www.malasngoding.com</h1>
<div class="box">
<h1>Ini adalah box</h1>
</div>
<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>
</body>
</html>
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1{
text-align: center;
}
.box{
background: blue;
height: 200px;
width: 300px;
padding: 20px;
}
.box-dua{
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
Belajar CSS Margin dan Padding pada CSS
sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan padding pada css.
Incoming search terms:
- //www malasngoding com/belajar-css-margin-dan-padding-pada-css/
- fungsi padding pada css
- margin dan padding
- margin pada html
- css dasar
- margin adalah
- buat margin sublime
- margin bottom adalah
- padding dan margin
- padding
- SHARE :
Diki Alfarabi Hadi
Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: Belajar css dasar, belajar padding dan margin yang benar di css, cara penulisan margin dan padding di css, contoh dan pengertian padding css, contoh margin dan padding, fungsi margin dan padding css, margin css, padding css, padding margin, penggunaan margin dan padding di css, tutorial belajar css margin dan padding di css, tutorial css dasar untuk pemula
Tutorial CSS Dasar
- #1. Pengenalan CSS
- #2. Penulisan CSS
- #3. Background CSS
- #4. Margin dan Padding CSS
- #5. Font CSS
- #6. Link / Hyperlink CSS
- #7. Format Text CSS
- #8. Position CSS
- #9. Border CSS
- #10. List CSS
- #11. Float CSS
- #12. Tutorial CSS Lainnya
Tutorial CSS3 Dasar
- #1. Pengenalan CSS3
- #2. Rounded Corner CSS3
- #3. Warna Gradient CSS3
- #4. Efek Bayangan CSS3
- #5. Transform CSS3
- #6. Transition CSS3
- #7. Animasi CSS3
- #8. Tutorial CSS3 Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi HadiMembuat Bentuk Segitiga Dengan CSS
7 July 2020
Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi HadiMembuat Lingkaran Dengan CSS
25 September 2018
Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi HadiMembuat Template Web Responsive Dengan HTML dan CSS
10 May 2017
Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ...