Rumah >hujung hadapan web >tutorial css >Sifat mana dalam CSS yang menentukan padding yang betul bagi sesuatu elemen?
Sifat mana dalam CSS yang menentukan padding yang betul bagi sesuatu elemen?
- PHPzke hadapan
- 2023-09-12 19:13:10711semak imbas
Dalam CSS, sifat padding membolehkan kami menambah ruang tambahan antara sempadan elemen HTML dan kandungannya. Pelapik kanan bermakna hanya menambah ruang antara kandungan elemen dan sempadan kanan.
Di sini kita akan mempelajari dua sifat berbeza untuk menentukan pelapik elemen yang betul.
Gunakan sifat CSS berlapik kanan
Sifat 'padding-right' menentukan padding yang betul bagi elemen dalam CSS. Setiap kali kita menentukan pelapik kanan untuk elemen, lebar elemen adalah sama dengan lebar sebenar + pelapik kanan.
Tatabahasa
Pengguna boleh mengikut sintaks di bawah untuk menentukan padding yang betul bagi sesuatu elemen.
padding-right: 100px;
Contoh 1
Dalam contoh di bawah, div induk mengandungi berbilang div anak. Menggunakan sifat CSS "padding-right", kami menentukan padding kanan "300px" untuk div induk. Selain itu, kami menentukan padding-right 100px untuk semua elemen div kanak-kanak.
Dalam output, pengguna dapat melihat bahawa terdapat ruang 300px antara sempadan kanan dan div kanak-kanak. Selain itu, terdapat 100px ruang kosong antara sempadan kanan dan kandungan teks.
<html>
<style>
.parent {
width: 300px;
height: 400px;
border: 2px solid red;
padding-right: 300px;
display: flex;
flex-wrap: wrap;
}
.child {
width: 200px;
height: 100px;
border: 2px solid green;
padding-right: 100px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "parent">
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
<div class = "child"> This is a child div. </div>
</div>
</body>
</html>
Contoh 2
Dalam contoh di bawah, kami telah mencipta komponen kad dan menambah imej padanya. Selain itu, kami telah memberikan div kad padding yang betul sebanyak 10px. Dalam output, pengguna boleh memerhatikan ruang 10px di sebelah kanan.
<html>
<style>
.card {
width: 520px;
height: 100px;
background-color: grey;
padding-right: 10px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "card">
<img src = "https://www.tutorialspoint.com/images/logo.png" alt = "">
</div>
</body>
</html>
Gunakan sifat isian CSS
Sifatpadding menetapkan padding pada keempat-empat sisi elemen. Kita boleh menetapkan padding yang betul kepada nilai dan bahagian lain kepada 0. Nilai pertama mewakili bahagian atas, yang kedua mewakili kanan, yang ketiga mewakili bahagian bawah, dan yang keempat mewakili kiri. Jadi kita akan mengekalkan 0 sebagai nilai kecuali yang kedua.
Tatabahasa
Pengguna boleh menggunakan sifat CSS padding untuk menentukan padding yang betul bagi sesuatu elemen mengikut sintaks berikut.
padding: 0 value 0 0;
Contoh 3
Dalam contoh di bawah, kami telah menambahkan div kad dan menambahkan beberapa teks di dalam div bekas. Selain itu, kami memberikan pelapik "5rem" di sebelah kanan elemen div bekas. Pengguna boleh memerhatikan jarak 5rem antara sempadan kanan div bekas dan kandungannya.
<html>
<style>
.container {
width: 10rem;
height: 10rem;
background-color: #f08a8a;
padding: 0 5rem 0 0;
}
</style>
<body>
<h3>Using the <i> padding CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "container">
<div class = "card">
<h3>This is a card inside the container div. The right padding is 2rem.</h3>
</div>
</div>
</body>
</html>
Pengguna belajar untuk menentukan padding yang betul untuk elemen HTML dan mereka boleh menggunakan sifat CSS "padding-right" atau "padding". Jika kita menggunakan atribut padding, kita hanya perlu menentukan nilai kedua dan biarkan nilai lain pada 0.
Atas ialah kandungan terperinci Sifat mana dalam CSS yang menentukan padding yang betul bagi sesuatu elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!