Padding की Utilities
Padding utilities एक element के अंदर इसकी border और content के बीच space add करती हैं।
In this page:
Syntax
<div class="p-3 pt-2 px-4 py-5">...</div>
<!-- p{side}-{size}: side = t, b, s, e, x, y; size = 0-5 -->Padding Utilities
Padding letter p के साथ margins जैसा same pattern इस्तेमाल करता है: p-3, pt-2, px-4, py-5। Sizes 0 से 5 तक चलती हैं। Padding element के background के अंदर है, इसलिए padding बढ़ने पर coloured boxes बढ़ते हैं। flex और grid children के बीच space के लिए gap utilities इस्तेमाल करें।
Note:
Padding एक element के box size में add होता है जब तक box-sizing border-box न हो, जो Bootstrap set करता है।
उदाहरण: Padding utilities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="bg-primary text-white p-0 mb-2">p-0</div>
<div class="bg-primary text-white p-2 mb-2">p-2</div>
<div class="bg-primary text-white px-5 py-1 mb-2">px-5 py-1</div>
<div class="bg-primary text-white p-5">p-5</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- margin और padding confuse करना
- siblings space करने के लिए gap की बजाय padding इस्तेमाल करना
- sides भूल जाना
चैप्टर सारांश
- p{side}-{size} pattern इस्तेमाल होता है
- Padding box के अंदर बैठता है
- Background padding cover करता है
- Margins जैसे same sides और sizes
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: