W3.CSS ichki bo‘shliq (padding)
Ichki bo‘shliq (padding)
Ichki bo‘shliq (padding) element ichida bo‘shliq hosil qiladi.
W3.CSS turli miqdordagi ichki bo‘shliq qo‘shish uchun klasslarni taqdim etadi.
Ichki bo‘shliq (padding) nima?
Ichki bo‘shliq — element kontenti bilan uning chegarasi orasidagi bo‘shliq.
Ichki bo‘shliq (padding)
Bu matn atrofidagi ko‘k bo‘shliq — ichki bo‘shliq (padding).
Misol
<div class="w3-container w3-blue w3-padding-32">
<h3>Padding</h3>
<p>The blue space around this text is padding.</p>
</div>
O‘zingiz sinab ko‘ring »
Ichki bo‘shliq o‘lchami klasslari
Ichki bo‘shliq o‘lchami klasslari elementning to‘rt tomoniga ham ichki bo‘shliq qo‘shadi.
| Klass | Yuqori va pastki | Chap va o‘ng |
|---|---|---|
w3-padding-small |
4px | 8px |
w3-padding |
8px | 16px |
w3-padding-large |
12px | 24px |
w3-padding-small
w3-padding
w3-padding-large
Misol
<div class="w3-padding-small">Small padding</div>
<div class="w3-padding">Normal padding</div>
<div class="w3-padding-large">Large padding</div>
O‘zingiz sinab ko‘ring »
Vertikal ichki bo‘shliq
Raqamli padding klasslari elementning yuqori va pastki qismiga ichki bo‘shliq qo‘shadi.
| Klass | Yuqori va pastki |
|---|---|
w3-padding-16 |
16px |
w3-padding-24 |
24px |
w3-padding-32 |
32px |
w3-padding-48 |
48px |
w3-padding-64 |
64px |
Misol
<div class="w3-padding-16">16px padding</div>
<div class="w3-padding-32">32px padding</div>
<div class="w3-padding-64">64px padding</div>
O‘zingiz sinab ko‘ring »
Raqamli klasslar faqat vertikal ichki bo‘shliq qo‘shadi.
Ular chap yoki o‘ng tomonga ichki bo‘shliq qo‘shmaydi.
Yuqori ichki bo‘shliq
W3.CSS elementning faqat yuqori qismiga ichki bo‘shliq qo‘shish uchun ham klasslarni taqdim etadi.
| Klass | Yuqori ichki bo‘shliq |
|---|---|
w3-padding-top-24 |
24px |
w3-padding-top-32 |
32px |
w3-padding-top-48 |
48px |
w3-padding-top-64 |
64px |
Bo‘limga ichki bo‘shliq berish
Katta vertikal ichki bo‘shliq veb-sahifada aniq ajralib turadigan bo‘limlar yaratish uchun qulay.
Explore Norway
Mountains, fjords, cities, and northern lights.
Misol
<div class="w3-container w3-blue w3-center w3-padding-48">
<h2>Explore Norway</h2>
<p class="w3-large">Mountains, fjords, cities, and northern lights.</p>
<button class="w3-button w3-white w3-round">Explore</button>
</div>
O‘zingiz sinab ko‘ring »
Padding klasslarini birlashtirish
Turli yo‘nalishlarda ichki bo‘shliq kerak bo‘lganda padding klasslarini birlashtirish mumkin.
Welcome
Bu elementning barcha tomonlarida oddiy ichki bo‘shliq, yuqorisida esa qo‘shimcha ichki bo‘shliq bor.
Misol
<div class="w3-container w3-light-grey w3-padding w3-padding-top-48">
<h2>Welcome</h2>
<p>Normal padding with extra top padding.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!