مفهوم مارجین و پدینگ و بوردر

( جمعه ، 1 بهمن سال 1400 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه پنجاه و یک

آموزگار :

مهدی جبین پور

در این قسمت از آموزش با مفهوم Margin(مارجین)، Padding(پدینگ) و Border(بوردر) آشنا می شویدو این مورد کدهای بسیار مهم و ضروری CSS و طراحی سایت است.به طور خلاصه Margin فاصله خارجی عناصر، Padding فاصله داخلی محتوا از عنصر و Border کادر و حاشیه دور محتوا می باشد. ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مفهوم مارجین و پدینگ و بوردر

( جمعه ، 1 بهمن سال 1400 )

 

Padding

فاصله بین محتوا تا مرز عنصر با Padding مشخص می­شود. با اضافه کردن Padding به المان، محتوا فشرده شده و بیم محتوا و لبه­ ها فاصله ایجاد می­ شود. فاصله Padding از ضلع­ های بالا، راست، پایین و چپ(Top, Right, Bottom, Left) است.به ­طور کلی و یا جزء به جزء و با واحد پیکسل(px) تعیین  می شود.

در ویژوال کامپوزر، عنصری که می­خواهید فاصله Padding برای آن قرار دهید را در حالت ویرایش باز کنید و در صفحه تنظیمات المان، سربرگ طراحی، قسمت فاصله را انتخاب کنید. مقدار فاصله Padding را از اطراف مشخص کرده و با واحد پیکسل(px) در جعبه Padding  اضافه کنید. به این ترتیب محتوا از ضلع­ های عنصر به اندازه مقدار Padding  فاصله می­گیرد.

 

Border

 Border حاشیه و کادر المان را شامل می ­شود و می­توان برای آن ضخامت، نوع و رنگ تعیین کرد.

در صفحه ساز ویژوال کامپوزر، المان را در حالت ویرایش بازکنید.  در صفحه تنظیمات، سربرگ طراحی، قسمت حاشیه را کلیک کنید. استایل حاشیه را انتخاب کنید و در جعبه عرض خط کادر، ضخامت کادر را تعیین نمایید. همچنین می­توانید در جعبه گرد کردن حاشیه میزان گردی زاویه­ های کادر و از جعبه رنگ­ ها، رنگ کادر را مشخص کنید. پس از ذخیره تغییرات، و مشاهده صفحه در مرورگر، خواهید دید، کادر با مقادیر مشخص شده دور تا دور المان اضافه شده است.

 Margin

Margin فضای خارجی محتوا تا مرز عناصر و همچنین فاصله بین عناصر را شامل می­شود. فاصله Margin از ضلع­های بالا، پایین، راست و چپ(Top, Right, Bottom, Left) به­ طور کلی و یا جزء به جزء و با واحد پیکسل(px) تعیین می­شود.

برای اضافه کردن فاصله Margin به عنصر در وردپرس، المان را در حالت ویرایش قرار دهید. در صفحه ردیف تنظیمات، سربرگ طراحی و بخش فاصله را انتخاب کنید و مقدار موردنظر Margin را در قسمت margin با درج واحد پیکسل  (px) قرار دهید.

 

برای نوشتن دیدگاه باید وارد بشوید.

5 دیدگاه. ارسال دیدگاه جدید

  • محمد جواد امینی
    ژانویه 10, 2022 6:31 ب.ظ

    با سلام و احترام
    من میخواستم که یک فاصله دلخواه بین محتوام و کنار سایتم بیارم و محتوام رو به اندازه مشخصی وسط چین بکنم
    برای اینکار ردیف هام رو روی حالت کشیدگی محتوان و ردیف قرار دادم و به هر ردیف یک مقدار پدینگ از دو طرف دادم
    توی مانیتورم خوب نمایش داده میشه اما توی بقیه دیوایس ها خوب نیست و ریسپانسیوش بهم میخوره
    میخواستم بدونم چطور میتونم محتوام رو با یک فاصله دلخواه از کناره های سایتم نمایش بدم به شکلی که ریسپانسیوش بهم نخوره و توی بقیه ی نمایشگر ها خوب نمایش داده بشه
    ممنون از وبسایت خوبتون

  • سلام خدا قوت. از آموزش های خوبتون متشکرم.
    ببخشید من میخوام یک اسلایدر تصویر برای ابتدای سایتم ایجاد کنم که مثل اسلایدر های دیجی کالا باشه یا اسلایدری که الان در سایت خودتون در برگه خانه و ابتدای سایتتون دارید، اما اسلایدرم خیلی مربعی شکل هست و میخوام کشیده تر باشه و همچنین از سمت راست سایت خیلی فاصله داره ولی نتونستم با مارجین و پدینگ درستش کنم میشه لطفا راهنماییم کنید خیلی ممنونم.

    • کارشناس پشتیبانی شماره چهار
      سپتامبر 3, 2021 4:39 ب.ظ

      سلام خانم کوثری
      متأسفانه متوجه نمی شوم به چه صورت طراحی را انجام داده اید. می توانید یک تیکت ارسال کنید تا همکاران بخش فنی بررسی در این رابطه داشته باشند و شما را راهنمایی کنند.
      با تشکر

  • درود بر شما. خیلی عالی بود سپاسگذارم

فهرست