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-toplength
درصد %
میزان فاصله درونی را در طرف بالای عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گیریم .
padding-rightlength
درصد %
میزان فاصله درونی را در طرف راست عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گیریم .
padding-bottomlength
درصد %
میزان فاصله درونی را در پایین عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گیریم .
padding-leftlength
درصد %
میزان فاصله درونی را در طرف چپ عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گیریم .
آموزش CSS آموزش طراحی وب

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

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