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 ]

مثال : در مثال زیر میزان فاصله درونی را برای جهت های بالا و پایین 10px و برای جهت های راست و چپ 20px تعیین کرده ایم :

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 آموزش طراحی وب

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

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