Belajar CSS Dasar : Margin 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 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--
<!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--
.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}
.box-dua{
background: red;
height: 100px;
width: 200px;
margin-left: 70px;
}
.png)
.png)
Komentar
Posting Komentar