CSS MARGIN
Margin pada CSS berfungsi untuk membuat ruang disekitar element,kita mengatur tinggi atas dan bawah juga kita dapat mengatur lebar kanan dan kiri pada ruang pada element dengan menggunakan Margin pada CSS.
baca juga referensi yang bisa membantumu :
dibawah ini adalah contoh baris kode pendeknya pada margin.
dengan baris kode :
margin : 100px 30px 100px 30px;
keterangan :
100px : margin atas
30px : margin kanan
100px : margin bawah
30px : margin kiri
liat koding dibawah ini :
<html>
<head>
<title>https://buayaberdiri.blogspot.co.id/</title>
<style>
body{
border : double red;
margin:100px 30px 100px 30px;
color:red;
}
#juiz{
border-style: hidden;
}
</style>
</head>
<body>
<div id="juiz">
<center><h1>https://buayaberdiri.blogspot.co.id/</h1></center>
</div>
</body>
</html>
maka akan browser akan menampilkan seperti ini :
coba kita rubah ukuran marginnya :
<html>
<head>
<title>https://buayaberdiri.blogspot.co.id/</title>
<style>
body{
border : double red;
margin:30px 100px 30px 100px;
color:red;
}
#juiz{
border-style: hidden;
}
</style>
</head>
<body>
<div id="juiz">
<center><h1>https://buayaberdiri.blogspot.co.id/</h1></center>
</div>
</body>
</html>
maka akan menampilkan browser seperti ini :
pada gambar diatas merupakan kode satu baris pada margin,kita dapat mengatur margin dengan satu per satu dengan menggunakan margin top,margin right,margin bottom,margin left.
supaya tidak bingun,coba perhatikan kode baris berikut ini :
<html>
<head>
<title>https://buayaberdiri.blogspot.co.id/</title>
<style>
body{
border : double red;
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
color:red;
}
#juiz{
border-style: hidden;
}
</style>
</head>
<body>
<div id="juiz">
<center><h1>https://buayaberdiri.blogspot.co.id/</h1></center>
</div>
</body>
</html>
coba kalian perhatikan pada kode baris :
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
seperti itulah jika kita menggunakan margin satu per satu,coba kita liat bagaimana browser menampilkan elementnya :
nah sampai disini dulu yahh guyss :)
selamat mencoba :)
Gbu :)