Belajar CSS - Memahami Margin, Padding dan Border pada CSS

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, border 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

  1. Apa itu Margin?
  2. Apa itu Padding?
  3. 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
css border
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
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.
css margin
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!!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

Belum ada Komentar untuk "Belajar CSS - Memahami Margin, Padding dan Border pada CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel