🎁 تخفیف استثنائی تمامی پکیج های آموزشی 🎁

Padding در CSS - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت به آموزش Padding در CSS می پردازیم.

Padding در CSS - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت به آموزش Padding در CSS می پردازیم. به عبارتی می خواهیم ببینیم چطور می توانیم فضایی را اطراف محتوای عناصر HTML در صفحه ایجاد کنیم. 

آموزش طراحی سایت

عنصر بالا یک Padding به اندازه 70 پیکسل دارد.

مشخصه Padding به منظور تولید فضا در اطراف محتوای یک عنصر استفاده می شود. از این مشخصه به 4 شکل زیر می توانید استفاده کنید و با استفاده از هر کدام از این مشخصه ها برای هر لبه عنصر HTML به صورت مستقل فاصله ای را اطراف محتوا در نظر بگیرید.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

تمام مشخصه های padding می توانند مقادیر زیر را داشته باشند:

  • length  - می توانید فاصله ای را با استفاده از واحدهای اندازه گیری مطلق cm ،px و ... مشخص نمایید.
  • %  - فاصله را بصورت درصدی از عرض عنصر مشخص می کند.
  • inherit  - با استفاده از کلمه کلیدی inherit  مقدار این ویژگی برابر با مقدار مشخصه padding عنصر والد خواهد بود.

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

مثال زیر نحوه استفاده از مشخصه padding را نمایش می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS


خلاصه نویسی مشخصه padding

برای کوتاه کردن کد، می توانید تمام مشخصه ی های padding را در یک مشخصه خلاصه کنید. مشخصه padding می تواند برای کوتاه کردن و نوشتن مشخصه های زیر به کار رود:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

استفاده از مشخصه padding با چهار مقدار:

زمانی که چهار مقدار داریم، می توانیم مقادیر را در جهت عقرب های ساعت به خاطر بسپاریم.

 ;padding: 25px 50px 75px 100px

در این حالت اولین مقدار برای لبه بالا، دومین مقدار برای لبه سمت راست، سومین مقدار برای لبه پایین و مقدار چهارم برای لبه سمت چپ استفاده می شود.

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش Padding در CSS


استفاده از مشخصه padding با سه مقدار:

در این حالت اولین مقدار padding لبه بالا، دومین مقدار لبه سمت راست و چپ و مقدار سوم padding لبه پایین را مشخص میکند.

;padding: 25px 50px 75px

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS


استفاده از مشخصه padding با دو مقدار:

در این حالت اولین مقدار padding لبه بالا و پایین و دومین مقدار paddingلبه راست و چپ مشخص می کند.

;padding: 25px 50px

  • top and bottom paddings are 25px
  • right and left paddings are 50px

آموزش طراحی سایت

آموزش CSS

و در آخر زمانی که یک مقدار برای ویژگی padding  تعیین می کنیم، همه 4 جهت عنصر مقدار padding یکسانی خواهند داشت.

;padding: 25px

آموزش طراحی سایت

خروجی مثال بالا به شکل زیراست:

آموزش Padding در CSS


 مشخصه box-sizing

در حالت عادی زمانی که width و height یک عنصر تعیین می شود این اندازه ها به ناحیه محتوا (content-box) تعلق پیدا می کنند. حال فرض کنید بخواهیم متنی را در همان عنصر قرار دهیم. قطعا نیاز به یک padding  برای ایجاد فضا بین حاشیه عنصر و متن داریم. زمانی که این فاصله داخلی را اعمال کنیم عرض و ارتفاع عنصر HTML تحت تاثیر قرار گرفته و دیگر آن اندازه ای که ما مشخص کرده بودیم، نخواهند بود.

برای رفع این مشکل، در CSS مشخصه ای به نام box-sizing وجود دارد که به ما اجازه می دهد، در نحوه اعمال اندازه ها بر روی عناصر HTML کنترل داشته باشیم. مقادیری که می توان به این مشخصه نسبت داد شامل content-box ،padding-box و border-box می باشد، که مقدار پیشفرض آن content-box است.

مثال:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش Padding در CSS

برای نگه داشتن عرض روی 300px، مهم نیست که چقدر padding وجود دارد، می توانید از مشخصه ی box-sizing استفاده کنید. این مشخصه باعث می شود عنصر عرض خودش را حفظ کند؛ اگر شما padding را افزایش دهید تنها فضای قابل استفاده برای محتوا کاهش پیدا می کند و به عرض عنصر افزوده نمی شود.

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

آموزش طراحی سایت آموزشCSS آموزش HTML آموزش Padding در CSS دوره آموزش طراحی سایت box-sizing

مقالات این دسته بندی