Dalam proses pembuatan sebuah website, Margin, padding serta border bukan lah hal yang bisa disepelekan, karena di ketiga nya itu sangat penting, mulai untuk mengatur menu box gambar halaman dan lain lain.
Baik teman teman, selamat datang kembali di Blog Awonapa Jr. pada kesempatan ini kita akan membahas mengenai Memahami Margin, Padding dan Border pada CSS.
 |
| Margin, padding, dan border pada CSS |
|
Sebelum kita memasuki materi selanjutnya, mari kita lihat beberapa hal yang akan kita bahas pada materi ini, Mari.
Pembahasan
- Apa itu Margin?
- Apa itu Padding?
- Border adalah?
Oke kita sudah melihat beberapa pembahasan diatas, mari kita bahas satu persatu kawan...
 |
| margin, padding, border |
1. Apa itu Margin?
Margin digunakan untuk memberikan atau mengaplikasikan jarak tepi pada sebuah elemen bagian luar, atau tepi garis luar. Margin memiliki beberapa macam nilai property yang biasa digunakan yaitu
margin-top, margin-right, margin-left, dan margin-bottom
Penggunaan Sintaks pada Margin
margin: length | percentage | intial | inherit | auto
Untuk nilai CSS pada margin yaitu
length (px, mm, cm, in, pt, pc) yang biasa saya gunakan adalah px
percentage (%) contoh penggunaan nya margin: 20%;
auto , contoh penggunaan nya seperti ini margin: 0 auto;
2. Apa itu Padding?
Padding adalah sebutan untuk ruang, atau jarak, atau spasi diantara konten dan border, gambar diatas tadi bisa menjadi penjelasan Padding,
Beberapa Nilai Property yang digunakan pada Padding yaitu
padding-top, padding-right, padding-left, dan padding-bottom
contoh penggunaan seperti ini.
Penggunaan Padding
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
atau bisa seperti ini.
padding: 10px;
3. Apa itu Border?
Border atau garis tepi , biasa digunakan pada halaman website. Beberapa contoh penggunaan border.
Border Style
border-style: none;
..
border-style: solid;
..
border-style: dotted;
..
border-style: dashed;
..
border-style: double;
..
border-style: grovee;
..
border-style: ridge;
..
border-style: inset;
..
border-style: outset;
Hasil seperti ini
 |
| border css |
Border Width
border-style: solid; solid; border-width: 10px;
..
border-style: solid; solid; border-width: medium;
Border Color
border-style: solid; solid; border-color: red;
..
border-style: solid; solid; border-color: green;
Border Radius
border-style: solid; border-radius: 10px;
Hasil berikutnya
 |
| css border |
Nah begitulah sekilas tentang Border, Oke bagaimana jika kita gabungkan semua nya, mulai dari
margin, padding dan border,
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style>
.all {
width: 100px;
height: 50px;
display: inline-block;
background-color: #19DCE7;
color: white;
padding: 10px 10px;
text-align: center;
margin: 40px;
border:5px solid black;
}
.all1 {
padding: 5px;
background-color: #137BD8;
}
</style>
</head>
<body>
<div>
<div class="all">
<div class="all1">Hello Kawan Kawan</div>
</div>
</div>
</body>
</html>
Dari hasil index.html diatas, maka akan menghasilkan seperti ini.
 |
| margin, padding dan border css |
Oke baik teman teman, itulah sekilas materi tentang
Memahami Margin, Padding dan Border pada CSS, dan semoga bermanfaat.
Salam Semangatt!!
Posting Komentar untuk "Belajar CSS - Memahami Margin, Padding dan Border pada CSS"