فاصلههای درونی (Padding)
فاصلههای درونی (Padding): ایجاد فضای تنفس 🛁🧱
ویژگی padding برای ایجاد فضا در داخل المان، یعنی بین محتوا (متن یا تصویر) و مرزهای آن (Border) استفاده میشود. پدینگ باعث میشود محتوای شما به دیوارهها نچسبد و خوانایی متن به شدت افزایش یابد.
۱. تاثیر پدینگ بر پسزمینه
برخلاف مارجین، پدینگ تحت تاثیر background-color المان قرار میگیرد. یعنی اگر به یک دکمه پدینگ بدهید، رنگ پسزمینه دکمه در آن فضا هم دیده میشود و دکمه بزرگتر به نظر میرسد.
۲. جهتهای پدینگ و کوتاهنویسی
مشابه مارجین، اینجا هم میتوانیم برای هر سمت جداگانه تصمیم بگیریم یا از متد کوتاهنویسی استفاده کنیم:
div {
padding: 25px 50px;
}
/* بالا و پایین | چپ و راست */۳. پدینگ و عرض المان (The Box Model Problem) 📐
یک نکته بسیار مهم: به صورت پیشفرض در CSS، وقتی به یک المان با عرض 300px پدینگ 50px میدهید، عرض کل المان 400px میشود (300 + 50 سمت راست + 50 سمت چپ). این موضوع میتواند چیدمان سایت شما را بهم بریزد.
box-sizing: border-box; استفاده میکنیم. در این حالت، پدینگ از داخل عرضِ مشخص شده کسر میشود.
تفاوت عملکرد:
{code_block('div {\n width: 300px;\n padding: 25px;\n box-sizing: border-box; /* عرض نهایی همان 300 باقی میماند */\n}')}تمرینهای عملی
برای تثبیت یادگیری این درس تمرینهای زیر را حل کنید
برای کلاس .btn، پدینگ بالا را 10 پیکسل، راست را 20 پیکسل، پایین را 15 پیکسل و چپ را 30 پیکسل قرار دهید.
.btn {
padding: 10px 20px 15px 30px;
}آماده رفتن به درس بعدی هستید؟
این درس را به پایان رساندید و میتوانید به درس بعدی بروید.