پیش‌بینی padding در CSS؛ تفاوت فاصله داخلی و عرض محتوا

padding بین محتوای عنصر و خط دورش فاصله می‌سازه. اگه خط دور وجود نداشته باشه هم این فاصله داخلی پابرجاست و زمینه عنصر تا اون ناحیه ادامه پیدا می‌کنه. مقدار تک‌عددی padding برای هر چهار سمت اعمال می‌شه. با دو مقدار، عدد اول بالا و پایین و عدد دوم راست و چپ رو تعیین می‌کنه؛ این ترتیب رو باید دقیق بخونی.

مثال حل‌شده دو مقدار متفاوت داره تا تفاوت جهت‌ها روشن بشه. توی سؤال اصلی فقط یک مقدار داریم و box-sizing عمداً content-box است. یعنی عرض محتوا ثابت می‌مونه و فاصله‌های داخلی به دو طرفش اضافه می‌شن. خطای رایج اینه که عدد padding رو فقط یک بار به عرض اضافه کنیم یا برای هر چهار جهت جمع بزنیم؛ در محاسبه عرض فقط راست و چپ سهم دارن. نبودن border هم مهمه، چون اینجا چیزی از خط دور به عرض نهایی اضافه نمی‌شه. قبل از انتخاب گزینه یک جمع ساده برای دو طرف بنویس.

✍️ مثال حل‌شده:

<div class="chip">برچسب</div>
<style>.chip { width:80px; padding:6px 10px; box-sizing:content-box; }</style>
<!-- عرض بیرونی بدون border برابر 100px است. -->

حالا نوبت توئه: جعبه .pad دارای width:100px و padding:20px با content-box و بدون border است. عرض تا لبه بیرونی زمینه چقدر می‌شود؟ margin در این نمونه صفر است؛ فقط عرض محتوا و فاصله داخلی راست و چپ را حساب کن.

فعالیت شما

جعبه .pad دارای width:100px و padding:20px با content-box و بدون border است. عرض تا لبه بیرونی زمینه چقدر می‌شود؟ margin در این نمونه صفر است؛ فقط عرض محتوا و فاصله داخلی راست و چپ را حساب کن.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!doctype html> <html lang="fa" dir="rtl"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head> <body> <div class="pad">فاصله داخلی</div> </body> </html>

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box} .pad{width:100px;padding:20px;border:0;margin:0;box-sizing:content-box;background-color:white}

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)

گزینه‌های پیش‌بینی خروجی