Belajar CSS Dasar Part 6 : Margin dan Padding pada CSS
Belajar CSS Mrgin dan Padding pada CSS
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 sebelah luar dari sebuah element.
maka pada tutorial hari ini saya akan menjelaskan tentang apa itu margin , padding dan bagaimana cara penggunaanya pada CSS.
Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element . misalnya ada ingin mengatur jarak antara element . anda bisa menggunakan syntax mergin untuk mengaturnya . terdapat beberapa sisi luar margin yaitu atas: 'Margin-top' , bawah: 'Margin-bootom', kiri: 'Margin-left' , kanan: 'Margin-right ' .
Contoh penggunaan margin pada CSS
index.html
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 hijau kita memberi 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 mengaturnya 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 elemnt , padding bawah ditulis di CSS dengan 'padding-bottom' , 'padding-left' sebagai jarak dalam sebelah kiri element , dan 'padding-right ' adalah sisi luar pada bagian sebelah kanan. jika kalian hanya menggunakan syntax 'padding' saja maka akan secara otomatis mengatur jarak atas , bawah , kiri dan kanan element yang bagian dalam . berikut ini adalah contoh penggunanan padding pada css .
index.php
style.css
Refrensi : http://www.w3schools.com/
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 sebelah luar dari sebuah element.
maka pada tutorial hari ini saya akan menjelaskan tentang apa itu margin , padding dan bagaimana cara penggunaanya pada CSS.
Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element . misalnya ada ingin mengatur jarak antara element . anda bisa menggunakan syntax mergin untuk mengaturnya . terdapat beberapa sisi luar margin yaitu atas: 'Margin-top' , bawah: 'Margin-bootom', kiri: 'Margin-left' , kanan: 'Margin-right ' .
Contoh penggunaan margin pada CSS
index.html
<!DOCTYPE html>style.css
<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>
.box{
background: green;
color: white;
height: 200px;
width: 300px;
margin: 20px;
}
.box-dua{
background: yellow;
height: 100px;
width: 200px;
margin-left: 70px;
}
Mengenal Padding pada CSS
padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax padding untuk mengaturnya 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 elemnt , padding bawah ditulis di CSS dengan 'padding-bottom' , 'padding-left' sebagai jarak dalam sebelah kiri element , dan 'padding-right ' adalah sisi luar pada bagian sebelah kanan. jika kalian hanya menggunakan syntax 'padding' saja maka akan secara otomatis mengatur jarak atas , bawah , kiri dan kanan element yang bagian dalam . berikut ini adalah contoh penggunanan padding pada css .
index.php
<!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
h1{
text-align: center;
}
.box{
background: green;
height: 200px;
width: 300px;
padding: 20px;
}
.box-dua{
background: yellow;
height: 100px;
width: 600px;
padding-left: 70px;
}
Refrensi : http://www.w3schools.com/
No comments