CSS Margins
Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti CSS untuk pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).Dan margin benar-benar transparan dan tidak memiliki warna latar belakang.
Margin di bagi menjadi 3 yaitu :
- Margin - Individual Sides.
- Margin - Shorthand Property.
- Use of The auto Value.
Margin - Individual Sides.
Semua sifat marjin dapat memiliki nilai berikut:
- auto - browser menghitung margin
- panjang - menentukan margin di px, pt, cm, dll
- % - Menentukan margin dalam% dari lebar dari elemen yang mengandung
- mewarisi - menetapkan bahwa margin harus diwarisi dari elemen induk.
<html>
<head>
<style>
p {
background-color: blue;
}
p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>
<h2>Using Individual margin Properties:</h2>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>
</body>
</html>
Hasilnya.
Margin - Shorthand Property.
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti margin dalam satu properti.
Margin memiliki 4 nilai property :
margin: 25px 50px 75px 100px;
- margin atas adalah 25px
- margin kanan adalah 50px
- margin bawah adalah 75px
- margin kiri adalah 100px
margin properti memiliki tiga nilai: - margin: 25px 50px 75px;
- margin atas adalah 25px
- margin kanan dan kiri adalah 50px
- margin bawah adalah 75px
margin properti memiliki dua nilai: - margin: 25px 50px;
- margin atas dan bawah yang 25px
- margin kanan dan kiri adalah 50px
margin properti memiliki satu nilai: - margin: 25px;
- keempat margin yang 25px
Contoh.
p.ex {
border:1px solid red;
margin: 100px 150px 100px 80px;
}
border:1px solid red;
margin: 100px 150px 100px 80px;
}
Anda dapat mengatur properti margin
auto untuk horizontal pusat elemen dalam wadah. Unsur kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan:
Contoh
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
CSS Padding
Sifat CSS Padding menentukan ruang putih antara isi elemen dan perbatasan elemen.
Padding membersihkan area di sekitar konten (di dalam perbatasan) dari elemen.Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Css Padding ini hampir sama Dengan Margins yang memiliki dua macam yaitu
- Margin - Individual Sides.
- Margin - Shorthand Property.
CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:
Memiliki property yang hampir sama dengan margins.
Contoh
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Margin - Shorthand Property.
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti bantalan dalam satu properti.
p {
margin: 100px 150px 100px 80px;
}
Referensi :
w3schools.com
Tidak ada komentar:
Posting Komentar
Berikan Komentar, yang baik akan di balas dengan baik Pula.
Komentarmu Cerminan Hidupmu.