حاشیه‌های داخلی در CSS

Padding (حاشیه‌ی داخلی) فضایی است که بین محتوای یک عنصر و حاشیه‌ی (border) آن قرار می‌گیرد. برخلاف Margin که فاصله‌ی بیرونی عنصر را تعیین می‌کند، Padding فضای داخلی عنصر را کنترل می‌کند و باعث می‌شود محتوا از لبه‌های عنصر فاصله داشته باشد.

ویژگی‌های جداگانه‌ی Padding

برای تعیین حاشیه‌ی داخلی هر ضلع به‌صورت جداگانه، از چهار ویژگی زیر استفاده می‌شود:

• padding-top: فاصله از بالا
• padding-right: فاصله از راست
• padding-bottom: فاصله از پایین
• padding-left: فاصله از چپ

div{
    padding-top: 25px;
    padding-right: 10px; 
    padding-bottom: 25px; 
    padding-left: 10px;  
}

در این مثال، محتوای داخل عنصر div از بالا و پایین 25px و از راست و چپ 10px با لبه‌های عنصر فاصله دارد. نمونه خروجی کد زیر را میتوانید در این متن نیز ببینید. برای دیدن بهتر این خروجی یک border هم برای این متن استفاده شده است.

ویژگی کوتاه‌شده‌ی padding

به‌جای نوشتن چهار ویژگی جداگانه، می‌توان از ویژگی کوتاه‌شده‌ی padding استفاده کرد. بسته به تعداد مقادیر نوشته‌شده، نحوه‌ی اعمال آن متفاوت است:

1. با یک مقدار: هر چهار طرف به یک اندازه فاصله می‌گیرند.
2. با دو مقدار: مقدار اول برای بالا و پایین، مقدار دوم برای راست و چپ است.
3. با چهار مقدار: به ترتیب برای بالا، راست، پایین و چپ اعمال می‌شود.

div{
    padding: 25px 10px 25px 10px; 
}

این خط دقیقاً همان نتیجه‌ی مثال قبلی را ایجاد می‌کند، اما به‌صورت خلاصه و در یک خط نوشته شده است.

تأثیر Padding بر اندازه‌ی نهایی عنصر

اضافه کردن Padding به یک عنصر باعث می‌شود اندازه‌ی نهایی آن عنصر در صفحه بزرگ‌تر شود، مگر اینکه از ویژگی box-sizing برای کنترل این رفتار استفاده شود.

div{
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

در این مثال، با تنظیم box-sizing: border-box;، مقدار Padding داخل همان عرض 200px محاسبه می‌شود و باعث بزرگ‌تر شدن اندازه‌ی نهایی عنصر نمی‌گردد.