CSS Padding

CSS Padding

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد .

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است .
مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin )

CSS Padding  CSS Padding CSS Padding CSS Padding

margin : فاصله بین فضای بیرونی تا حاشیه یا border میباشد که هیچ رنگی نمیگیرد

padding : فاصله بین المان (مثلا یک متن) تا حاشیه یا  border میباشد.

میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید .

box-model CSS Padding CSS Padding box model

پد (padding)

فضای خالی مابین محتوا و مرز ( Border ) داخلی Box ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی میکند .

مقادیر ممکن

مقدار توضیحات
length یک پد ثابت را تعریف می کند (بصورت px , pt , em و غیره)
% یک پد بصورت درصدی از عنصر محتوا تعریف می کند

کناره های منفرد

مثال زیر توجه کنید:

نتیجه به صورت زیر خواهد بود :

CSS Padding CSS Padding CSS Padding Capture 11

همه خصوصیات پد CSS

خاصیت توضیحات
padding یک خاصیت مختصر نویسی برای ایجاد تمام خصوصیات پد در یک بیانیه
padding-bottom پد پایین یک عنصر را تنظیم می کند
padding-left پد سمت چپ یک عنصر را تنظیم می کند
padding-right پد سمت راست یک عنصر را تنظیم می کند
padding-top پد بالای یک عنصر را تنظیم می کند

پس مشخصه های  padding عبارتند از :

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

تعيين با استفاده از خاصيت چند مقداری padding :

توسط خاصيت padding طبق الگوی زير ، ميزان فاصله را برای تمام جهات تنظيم می کنيم :

padding : [ padding top ] [ padding right ] [ padding bottom ] [ padding left ]

مثال : در مثال زير ميزان فاصله درونی را برای جهت های بالا و پايين ۱۰px و برای جهت های راست و چپ ۲۰px تعيين کرده ايم :

padding : 10px 20px 10px 20px

نام خاصيت نوع خاصيت شرح
padding-top length
درصد %
ميزان فاصله درونی را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
– length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-right length
درصد %
ميزان فاصله درونی را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
– length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-bottom length
درصد %
ميزان فاصله درونی را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
– length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم .
padding-left length
درصد %
ميزان فاصله درونی را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود :
– length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم .
آموزش CSS آموزش طراحی وب

دسته بندی و برچسب

دیدگاه خود را بیان کنید