W3.CSS tashqi bo‘shliq (margin)
Tashqi bo‘shliqlar (margin)
Tashqi bo‘shliqlar (margin) element tashqarisida bo‘shliq hosil qiladi.
W3.CSS elementlar atrofiga yoki yon tomoniga 16px tashqi bo‘shliq qo‘shish uchun klasslarni taqdim etadi.
Tashqi bo‘shliq (margin) nima?
Tashqi bo‘shliq — element chegarasidan tashqaridagi bo‘shliq.
Tashqi bo‘shliq (margin)
Bu yashil element atrofidagi oq bo‘shliq — uning tashqi bo‘shlig‘i (margin).
Misol
<div class="w3-container w3-green w3-margin">
<h3>Margin</h3>
<p>The white space around this element is its margin.</p>
</div>
O‘zingiz sinab ko‘ring »
Padding va margin
Padding element ichida bo‘shliq hosil qiladi.
Margin element tashqarisida bo‘shliq hosil qiladi.
Padding: ko‘k element ichidagi bo‘shliq.
Margin: ko‘k element tashqarisidagi bo‘shliq.
Misol
<div class="w3-padding">Padding</div>
<div class="w3-margin">Margin</div>
O‘zingiz sinab ko‘ring »
Margin klasslari
Barcha W3.CSS margin klasslari 16px tashqi bo‘shliqdan foydalanadi.
| Klass | Tavsif |
|---|---|
w3-margin |
Barcha tomonlarga 16px tashqi bo‘shliq qo‘shadi |
w3-margin-top |
Yuqoridan 16px tashqi bo‘shliq qo‘shadi |
w3-margin-right |
O‘ngdan 16px tashqi bo‘shliq qo‘shadi |
w3-margin-bottom |
Pastdan 16px tashqi bo‘shliq qo‘shadi |
w3-margin-left |
Chapdan 16px tashqi bo‘shliq qo‘shadi |
w3-section |
Yuqori va pastdan 16px tashqi bo‘shliq qo‘shadi |
Barcha tomonlardagi tashqi bo‘shliq
w3-margin klassi barcha tomonlarga 16px tashqi bo‘shliq qo‘shadi.
Mening barcha tomonlarimda 16px tashqi bo‘shliq bor.
Misol
<div class="w3-container w3-green w3-margin">
<p>I have a 16px margin on all sides.</p>
</div>
O‘zingiz sinab ko‘ring »
Alohida tomonlardagi tashqi bo‘shliqlar
Faqat bir tomonda bo‘shliq kerak bo‘lganda yo‘nalishli margin klasslaridan foydalaning.
w3-margin-top.
w3-margin-bottom.
w3-margin-left.
w3-margin-right.
Misol
<div class="w3-margin-top">Top margin</div>
<div class="w3-margin-right">Right margin</div>
<div class="w3-margin-bottom">Bottom margin</div>
<div class="w3-margin-left">Left margin</div>
O‘zingiz sinab ko‘ring »
Section klassi
Ko‘plab HTML elementlarida standart yuqori yoki pastki tashqi bo‘shliq bo‘lmaydi. Bunday elementlar o‘zaro tashqi bo‘shliqsiz ko‘rsatiladi.
Birinchi bo‘lim
Ikkinchi bo‘lim
w3-section klassi yuqori va pastdan 16px tashqi bo‘shliq qo‘shadi.
U kontent bo‘limlarini bir-biridan ajratish uchun qulay.
Birinchi bo‘lim
Ikkinchi bo‘lim
Eslatma
w3-section bo‘lmasa, ikki element bir-biriga tegib turadi.
Misol
<div class="w3-container w3-blue w3-section">
<h2>First Section</h2>
</div>
<div class="w3-container w3-green w3-section">
<h2>Second Section</h2>
</div>
O‘zingiz sinab ko‘ring »
Kartochkalar orasidagi bo‘shliq
Alohida komponentlar orasida bo‘shliq kerak bo‘lganda tashqi bo‘shliqlar qulay.
Design
Create clean interfaces.
Develop
Build responsive websites.
Deploy
Publish your work.
Misol
<div class="w3-card w3-container">...</div>
<div class="w3-card w3-container w3-margin-top">...</div>
<div class="w3-card w3-container w3-margin-top">...</div>
O‘zingiz sinab ko‘ring »
Yuqori tashqi bo‘shliq
w3-margin-top klassi elementga yuqoridan 16px tashqi bo‘shliq qo‘shadi:
Misol
<div class="w3-container w3-margin-top">
<p>I have a 16px top margin.</p>
</div>
O‘zingiz sinab ko‘ring »
Pastki tashqi bo‘shliq
w3-margin-bottom klassi elementga pastdan 16px tashqi bo‘shliq qo‘shadi:
Misol
<div class="w3-container w3-margin-bottom">
<p>I have a 16px bottom margin.</p>
</div>
O‘zingiz sinab ko‘ring »
Chap tashqi bo‘shliq
w3-margin-left klassi elementga chapdan 16px tashqi bo‘shliq qo‘shadi:
Misol
<div class="w3-container w3-margin-left">
<p>I have a 16px left margin.</p>
</div>
O‘zingiz sinab ko‘ring »
O‘ng tashqi bo‘shliq
w3-margin-right klassi elementga o‘ngdan 16px tashqi bo‘shliq qo‘shadi:
Misol
<div class="w3-container w3-margin-right">
<p>I have a 16px right margin.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!