Belajar CSS Bagian 3 ( Margin and Padding Formating )
Wednesday, February 2, 2011
Labels:
Tips Trik
Pada bagian sebelumnya kita telah mempelajari bagaimana memformat font dan text menggunakan CSS, sekarang kita akan mempelajari bagaimana merapikan text-text tersebut dengan melakukan penyesuaian margin dan padding sesuai keinginan kita. Ok langsung bae yo,
A. Margin Formating
Margin Formating membahas tentang cara menentukan jarak/space antara satu objek HTML dengan objek HTML lainnya. Contoh : menentukan jarak/space sebuah paragraf dengan tabel.
Berikut property yang umum digunakan dalam Margin formating :
a. margin
digunakan untuk menentukan space secara instant, yaitu menentukan space atas,bawah,kanan dan kiri secara langsung dalam satu pernyataan.
b. margin-left
digunakan untuk menentukan space bagian sebelah kiri objek.
c. margin-right
digunakan untuk menentukan space bagian sebelah kanan objek.
d. margin-top
digunakan untuk menentukan space bagian atas objek.
e. margin-bottom
digunakan untuk menentukan space bagian bawah objek.
Untuk lebih jelasnya perhatikan tabel property dan valuenya dibawah ini :
| No | Property | Values |
| 1 | margin | margin-top margin-right margin-bottom margin-left |
| 2 | margin-left | auto length % |
| 3 | margin-right | auto length % |
| 4 | margin-top | auto length % |
| 5 | margin-bottom | auto length % |
- auto : ditentukan secara default sistem.
- length : ditentukan secara manual menggunakan satuan sistem (px, cm, dll)
- % : ditentukan secara manual menggunakan satuan persentase(25%, 75%, dll)
Berikut contoh penggunaanya :
Code :
<html>
<head>
<title>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</title>
<style type="text/css">
h1
{
margin : 10px 500px 10px 10px;
}
h2
{
margin-left: 10px;
margin-right: 80%;
}
h3
{
margin-bottom: 5%;
}
h4
{
margin-top: 4cm;
}
h5
{
margin-right: 60%;
margin-left: 20%;
margin-top:5%;
}
</style>
</head>
<body>
<h1>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h2>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h3>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h4>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h5>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
</body>
</html>
Hasil :<html>
<head>
<title>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</title>
<style type="text/css">
h1
{
margin : 10px 500px 10px 10px;
}
h2
{
margin-left: 10px;
margin-right: 80%;
}
h3
{
margin-bottom: 5%;
}
h4
{
margin-top: 4cm;
}
h5
{
margin-right: 60%;
margin-left: 20%;
margin-top:5%;
}
</style>
</head>
<body>
<h1>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h2>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h3>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h4>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h5>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
</body>
</html>
B. Padding Formating
Padding Formating membahas tentang cara menentukan jarak/space antara border objek dengan kontent objek itu sendiri, misal : antara tabel dengan isi tabel itu sendiri.
Berikut property yang umum digunakan dalam Padding formating :
a. padding
digunakan untuk menentukan space padding secara instant, yaitu menentukan space atas,bawah,kanan dan kiri secara langsung dalam satu pernyataan.
b. padding-left
digunakan untuk menentukan space padding bagian sebelah kiri objek.
c. padding-right
digunakan untuk menentukan space padding bagian sebelah kanan objek.
d. padding-top
digunakan untuk menentukan space padding bagian atas objek.
e. padding-bottom
digunakan untuk menentukan space padding bagian bawah objek.
Untuk lebih jelasnya perhatikan tabel property dan valuenya dibawah ini :
| No | Property | Values |
| 1 | padding | padding-top padding-right padding-bottom padding-left |
| 2 | padding-left | length % |
| 3 | padding-right | length % |
| 4 | padding-top | length % |
| 5 | padding-bottom | length % |
- length : ditentukan secara manual menggunakan satuan sistem (px, cm, dll)
- % : ditentukan secara manual menggunakan satuan persentase(25%, 75%, dll)
Berikut contoh penggunaanya :
Code :
<html>
<head>
<title>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</title>
<style type="text/css">
h1
{
padding : 10px 500px 10px 10px;
}
h2
{
padding-left: 10px;
padding-right: 80%;
}
h3
{
padding-bottom: 5%;
}
h4
{
padding-top: 4cm;
}
h5
{
padding-right: 60%;
padding-left: 20%;
padding-top:5%;
}
</style>
</head>
<body>
<h1>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h2>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h3>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h4>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h5>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
</body>
</html>
Hasil : <head>
<title>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</title>
<style type="text/css">
h1
{
padding : 10px 500px 10px 10px;
}
h2
{
padding-left: 10px;
padding-right: 80%;
}
h3
{
padding-bottom: 5%;
}
h4
{
padding-top: 4cm;
}
h5
{
padding-right: 60%;
padding-left: 20%;
padding-top:5%;
}
</style>
</head>
<body>
<h1>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h2>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h3>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h4>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
<h5>Belajar CSS - Margin and Padding Formating (By. CobaLihatSaja.com)</h1>
</body>
</html>
Sampai disini dulu ya….. nanti kita lanjutkan di episode selanjutnya.
Salam Persahabatan…….
Terima Kasih Sudah Mampir, Salam Persahabatan...
0 comments:
Post a Comment