Artinya setiap sisi yaitu top, right, bottom, left atau atas, kanan, bawah, kiri sama – sama memiliki jarak kedalam sebesar 10px; yang di beri padding adalah kotak coklat muda .perhatikan gambar di bawah ini Show
 1. Padding-top:10px; Artinya hanya sisi atas memiliki jarak 10px. 2. Padding-right:10px; Artinya hanya sisi kanan memiliki jarak 10px. 3. Padding-bottom:10px; Artinya hanya sisi bawah memiliki jarak 10px. 4. Padding-left:10px; Artinya hanya sisi left memiliki jarak 10px. Kemudian untuk menyingkat penulisan jika setiap sisi mempunyai jarak yang berbeda: 1. Padding:10px 25px; Artinya 10px pertama dimiliki top dan 10px yang kedua adalah bottom sedangkan 25px kiri dan sisi kanan. 2. Padding:10px 20px 30px 40px; Artinya 10px Top , 20px Right, 30px bottom dan 40px left. Cara bacanya searah jarum jam ya dari atas, kanan, Bawah dan kiri. 3. Padding:10px 20px 30px 0; Artinya 10px top, 20px right, 30px bottom, 0 left 4. Padding:10px 20px 30px; Artinya 10px top, 20px right, 30px bottom, 20px right. Kenapa right 20px karena tidak di isi value 0. Maka left akan mengikuti right, yaitu 20px; Bagaimana cara penulisan margin ? penulisannya sama seperti padding hanya saja padding di ganti margin seperti contoh di atas . Margin:10px Margin-top:10px; Margin-right:10px; Margin-bottom:10px; Margin-left:10px; Begitu juga dengan penyingkatan penulisannya 1. Margin:10px 25px; 2. Margin:10px 20px 30px 40px; 3. Margin:10px 20px 30px 0; 4. Margin:10px 20px 30px; Perhatikan gambar di bawah ini Jika kotak abu abu saya kasih margin-left sebesar 10px; maka akan bergeser kekanan sebesar 10px; Terimakasih. Sampai jumpa di artikel berikutnya dan semoga bermanfaat. Mohon maaf lahir dan batin ya :D 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 CSSMargin 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 CSSPadding 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:
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.
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
Tutorial CSS3 Dasar
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat 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 Hadi 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 Hadi 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 Hadi
|
Padding dalam html untuk apa?
Pos Terkait
Copyright © 2024 membukakan Inc.
