حاشیه داخلی (Padding)
«حاشیه داخلی (Padding)» فاصله بین «محتوا» و «مرز (Border)» است. یعنی نفس کشیدن متن داخل جعبه. هرچه بیشتر باشد، محتوا از مرز دورتر می ایستد.
تعریف ساده و شروع سریع
Padding فضای درون عنصر است. بیرون مرز نیست. با آن چیدمان را خواناتر می کنیم. در موبایل هم جلوه بهتری می دهد.
نمونه مقدماتی
<style>
.box {
padding: 70px;
border-width: 1px;
border-style: solid;
}
</style>
<div class="box">This element has 70px padding.</div>
تنظیم جداگانه چهار طرف
می توانی برای بالا، راست، پایین، چپ جدا تعیین کنی. مقدارها برحسب px یا % هستند. ارث بری هم ممکن است.
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
هشدار: مقدار منفی برای padding مجاز نیست.
کوتاه نویسی padding
برای نوشتن سریع تر از کوتاه نویسی استفاده کن. ترتیب مقادیر از بالا و سپس ساعت گرد است.
چهار مقدار
<style>
div {
padding: 25px 50px 75px 100px;
}
</style>
سه مقدار
<style>
div {
padding: 25px 50px 75px;
}
</style>
دو مقدار
<style>
div {
padding: 25px 50px;
}
</style>
یک مقدار
<style>
div {
padding: 25px;
}
</style>
تأثیر padding بر عرض عنصر
ویژگی «width» فقط ناحیه محتوا را تعیین می کند. پس padding به عرض کل اضافه می شود. گاهی نتیجه مطلوب نیست.
<style>
div {
width: 300px;
padding: 25px;
}
</style>
box-sizing و کنترل عرض ثابت
«box-sizing» نحوه محاسبه اندازه را تعیین می کند. مقدار «border-box» padding و مرز را داخل همان عرض نگه می دارد.
<style>
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
</style>
گام های عملی پیشنهاد شده
- اول ساختار را بساز و متن را قرار بده.
- بعد padding هر طرف را با نیاز تنظیم کن.
- اگر عرض می شکند، «box-sizing: border-box» را فعال کن.
نکته: درصد padding از عرض ظرف محاسبه می شود. دقت کن.
برای ادامه مباحث جعبه: حاشیه بیرونی عنصر (Margin) و حاشیه بیرونی (Outline) را ببین. همچنین این صفحه حاشیه داخلی مرجع تو است.
جمع بندی سریع
- Padding داخل مرز قرار می گیرد.
- کوتاه نویسی نوشتن را سریع می کند.
- Padding به عرض کل اضافه می شود.
- برای عرض ثابت از border-box استفاده کن.