padding در CSS

padding در CSS فضای اطراف محتوای داخل عناصر را اضافه می کند. پدینگ بین حاشیه و محتوا است.

پدینگ و مقادیر احتمالی

CSS padding به فضای چهار طرف یک عنصر اشاره دارد. به طور خاص ، این منطقه بین مرز و محتوا است. بنابراین ، بالشتک در داخل عناصر است.

افزودن فضای HTML بین متن ها

برای افزودن فاصله بین متون ، می توانید از نمادهای ویژه HTML استفاده کنید. برای نتایج بهتر ، توصیه می کنیم از padding یا حاشیه برای افزودن عناصر فضای خالی استفاده کنید.

در مثال زیر ، ما از CSS داخلی ، کلاس و padding-left برای افزودن فضای HTML بین متن استفاده می کنیم.

<style> p.space {padding-left: 30px}</style>

به همین ترتیب ، می توانید با استفاده از padding-bottom فضای HTML را بین خطوط اضافه کنید. به این مثال نگاه کنید:

p.space {padding-bottom: 30px}

مقایسه paddind و margin

پدینگ و حاشیه بخشی از مدل جعبه است.

ایده اصلی CSS padding vs margin این است که padding درونی ترین قسمت مدل جعبه است (داخل یک عنصر است). حاشیه ها فضای اطراف عناصر را اضافه می کنند.

توجه: تفاوت مهم دیگر این است که حاشیه ها به مقادیر منفی اجازه می دهند و padding اجازه نمی دهد.

استفاده از پدینگ

خلاصه padding امکان تعریف چهار ویژگی را در یک اعلامیه فراهم می کند.

در مثال ، ما ویژگی padding را به یک عنصر <p> اختصاص می دهیم و هر چهار مقدار را به صورت جداگانه توصیف می کنیم.

p {
   padding: 30px;
}

Description	Property
padding بالای یک عنصر را تنظیم می کند	padding-top
padding سمت راست یک عنصر را مشخص می کند	padding-right
padding پایین یک عنصر را تنظیم می کند	padding-bottom
padding چپ یک عنصر را تنظیم می کند	padding-left

اگر مقادیری را برای دو یا سه ویژگی وارد کنید ، ترتیب مقادیر CSS تغییر می کند:

• یک مقدار – همان پدینگ را در چهار طرف تنظیم می کند.
• دو مقدار – مقدار اول پدینگ را در بالا و پایین اعمال می کند. مورد دوم padding را به سمت چپ و راست یک عنصر اضافه می کند.
• سه مقدار – اولین مقدار از بالشتک به بالا استفاده می کند. مورد دوم بالشتک را به سمت راست و چپ اضافه می کند. مقدار سوم ، پدینگ را به پایین اضافه می کند.

توجه: هنگام اعلام چهار مقدار ، یک دستور خاص CSS برای پر کردن باید دنبال شود: بالا ، راست ، پایین و چپ.

پدینگ بالا

ویژگی CSS padding-top ارتفاع ناحیه بالشتک بالای یک عنصر را نشان می دهد.

در این مثال ، خاصیت padding-top را به یک عنصر <p> اختصاص می دهیم.

p {
   padding-top: 20px;
}

برای این ویژگی می توانید مقادیر را به دو روش تعیین کنید:

• <length> از یک عدد و یک واحد استفاده کنید (به عنوان مثال em ، px ، cm).
• <percentage> از درصد برای نشان دادن مقدار درصد نسبت به عنصر استفاده کنید.

بخاطر بسپارید: این گزینه ها برای افزودن مقادیر برای کلیه خصوصیات padding زیر اعمال می شوند.

پدینگ راست

ویژگی CSS padding-right عرض ناحیه padding در سمت راست یک عنصر را مشخص می کند.

در مثال زیر ، مشخص می کنیم که عنصر <p> در سمت راست فضایی برابر با 10px داشته باشد.

p {
   padding-right: 20px;
}

پدینگ پایین

ویژگی CSS padding-bottom ارتفاع ناحیه padding زیر یک عنصر را مشخص می کند.

مثال نحوه ایجاد یک padding برابر با 15px زیر عنصر <p> را نشان می دهد.

p {
   padding-bottom: 20px;
}

پدینگ چپ

ویژگی CSS padding-left عرض ناحیه padding در سمت چپ یک عنصر را مشخص می کند.

در مثال ، یک پدینگ سمت چپ 5px به عنصر <p> اختصاص می دهیم.

p {
   padding-left: 40px;
}

پدینگ و عرض

تنظیم padding به عناصری که عرض خاصی دارند نتایج غیر منتظره ای خواهد داشت.

پدینگ به عرض عنصر اضافه خواهد شد. بالشتک بخشی از عنصر نخواهد بود. توسعه دهندگان این مورد را ناخواسته می دانند زیرا هر زمان که لایه بردار تغییر می کند ، عرض عناصر تغییر می کند.

توجه: با ارتفاع عناصر نیز همین وضعیت اتفاق می افتد. با این حال ، قد به ندرت تنظیم می شود.

بیایید بگوییم شما عرض عنصر خود را 225px و padding (مختصر) را 25px توصیف کرده اید.

عرض عنصر حاصل از شما 225 + 25 + 25 = 275px خواهد بود (25 پیکسل دو بار زیرا دو طرفین padding اضافه می شود).

با ویژگی اندازه جعبه به راحتی می توانید این مشکل را برطرف کنید. این عنصر به شما می گوید هنگام افزایش لنت ، عرض اصلی خود را حفظ کنید. علاوه بر این ، فضای محتوای موجود را کوچکتر می کند.

div {
    width: 225px;
    padding: 25px;
    box-sizing: border-box;
}

نکات مهم Padding در CSS:

• با کنار گذاشتن مقادیر برای خصوصیات خاص در بالشتک ، آنها را روی مقدار اولیه آن ها 0 قرار می دهید (بدون فاصله).
• برای تعریف هر چهار طرف عناصر و نوشتن کد کوتاهتر از CSS padding استفاده کنید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.