در این بخش از آموزش طراحی سایت به آموزش 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 را نمایش می دهد:
خروجی مثال بالا به شکل زیر است:
خلاصه نویسی مشخصه padding
برای کوتاه کردن کد، می توانید تمام مشخصه ی های padding را در یک مشخصه خلاصه کنید. مشخصه padding می تواند برای کوتاه کردن و نوشتن مشخصه های زیر به کار رود:
- padding-top
- padding-right
- padding-bottom
- padding-left
استفاده از مشخصه padding با چهار مقدار:
زمانی که چهار مقدار داریم، می توانیم مقادیر را در جهت عقرب های ساعت به خاطر بسپاریم.
;padding: 25px 50px 75px 100px
در این حالت اولین مقدار برای لبه بالا، دومین مقدار برای لبه سمت راست، سومین مقدار برای لبه پایین و مقدار چهارم برای لبه سمت چپ استفاده می شود.
خروجی مثال بالا به شکل زیر است:
استفاده از مشخصه padding با سه مقدار:
در این حالت اولین مقدار padding لبه بالا، دومین مقدار لبه سمت راست و چپ و مقدار سوم padding لبه پایین را مشخص میکند.
;padding: 25px 50px 75px
خروجی مثال بالا به شکل زیر است:
استفاده از مشخصه padding با دو مقدار:
در این حالت اولین مقدار padding لبه بالا و پایین و دومین مقدار paddingلبه راست و چپ مشخص می کند.
;padding: 25px 50px
- top and bottom paddings are 25px
- right and left paddings are 50px
و در آخر زمانی که یک مقدار برای ویژگی padding تعیین می کنیم، همه 4 جهت عنصر مقدار padding یکسانی خواهند داشت.
;padding: 25px
خروجی مثال بالا به شکل زیراست:
مشخصه box-sizing
در حالت عادی زمانی که width و height یک عنصر تعیین می شود این اندازه ها به ناحیه محتوا (content-box) تعلق پیدا می کنند. حال فرض کنید بخواهیم متنی را در همان عنصر قرار دهیم. قطعا نیاز به یک padding برای ایجاد فضا بین حاشیه عنصر و متن داریم. زمانی که این فاصله داخلی را اعمال کنیم عرض و ارتفاع عنصر HTML تحت تاثیر قرار گرفته و دیگر آن اندازه ای که ما مشخص کرده بودیم، نخواهند بود.
برای رفع این مشکل، در CSS مشخصه ای به نام box-sizing وجود دارد که به ما اجازه می دهد، در نحوه اعمال اندازه ها بر روی عناصر HTML کنترل داشته باشیم. مقادیری که می توان به این مشخصه نسبت داد شامل content-box ،padding-box و border-box می باشد، که مقدار پیشفرض آن content-box است.
مثال:
خروجی مثال بالا به شکل زیر است:
برای نگه داشتن عرض روی 300px، مهم نیست که چقدر padding وجود دارد، می توانید از مشخصه ی box-sizing استفاده کنید. این مشخصه باعث می شود عنصر عرض خودش را حفظ کند؛ اگر شما padding را افزایش دهید تنها فضای قابل استفاده برای محتوا کاهش پیدا می کند و به عرض عنصر افزوده نمی شود.
خروجی مثال بالا به شکل زیر است:
