آموزش خاصیت margin و padding جلسه ۱۲

//

آموزش خاصیت margin و padding

بنام خدا سلام ,

درخدمت شما هستم با یکی دیگر از جلسات آموزش html و css جلسه ۱۲ در وب سایت پاسخ وردپرس
توی این جلسه از آموزش html و css میخواهیم خاصیت padding و margin را برای شما به طور کامل در پاسخ وردپرس  آموزش بدیم پس با من همراه باشید.

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

آموزش html و css خاصیت margin و padding

آموزش margin و padding در css

خاصیت margin در css

همانطور که از عنوان این عبارت مشخص است، ویژگی margin برای تنظیم فاصله ی حاشیه ها استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی صفحه، از کناره ها و در واقع از تگ body به میزان چند پیکسل فاصله داشته باشد، کافی است برای آن بلاک، مقادیر حاشیه را در قسمت بالا (top)، به میزان مشخصی در یک کلاس (class) یا آی دی (id) تعریف کنیم، به طور مثال:

آموزش طراحی قالب html و css
یک آموزش جذاب دیگه!

خصوصیت Margin از یک تا چهار مقدار می تواند داشته باشد به مثال زیر دقت نمایید:

  • margin:25px 50px 75px 100px;
  • حاشیه بالا ۲۵ پیکسل
  • حاشیه راست ۵۰ پیکسل
  • حاشیه پایین ۷۵ پیکسل
  • حاشیه چپ ۱۰۰ پیکسل

خاصیت margin هم میشه به صورت خلاصه نوشت طبق مثال بالا میتوانیم هر جهت را به اسم خودش تعریف کنیم طبق مثال زیر

کلیه خصوصیات مربوط به حاشیه:

  • margin  حاشیه های اطراف یک عنصر را به صورت مختصر مشخص می کند.
  • margin-bottom حاشیه پایین یک عنصر را مشخص می کند.
  • margin-left حاشیه چب یک عنصر را مشخص می کند.
  • margin-right حاشیه راست یک عنصر را مشخص می کند.
  • margin-top حاشیه بالای یک عنصر را مشخص می کند.

خاصیت padding در css

آموزش html و css padding margin

با padding شما کنترل کاملی بر حاشیه خارجی عناصر html دارید و می توانید اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمایید.

مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد:
auto:تعیین مقادیر به صورت خودکار و محاسبه اندازه حاشیه بر عهده مرورگر
length :تعیین مقادیر حاشیه با مقادیری مانندpx, pt, cm, em, etc
% :تعیین مقادیر به درصد (Percent)، در این حالت اندازه حاشیه با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.، به فرض %۱۰ ، %۵۰

آموزش معرفی تگهای HTML5 قسمت دوم
یک آموزش جذاب دیگه!

خلاصه سازی padding:

شما می توانید خاصیت padding را برای جهات ( Top , Right , Bottom ,Left ) را در یک سطر خلاصه کنید.

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

کلیه خواص مربوط به padding

  • padding حاشیه های اطراف محتوای یک عنصر را به صورت مختصر مشخص می کند.
  • padding-bottom حاشیه پایین محتوای یک عنصر را مشخص می کند.
  • padding-left حاشیه چب محتوای یک عنصر را مشخص می کند.
  • padding-right حاشیه راست محتوای یک عنصر را مشخص می کند.
  • padding-top حاشیه بالای محتوای یک عنصر را مشخص می کند.

خوب دوستان عزیز این جلسه از آموزش HTML5 و CSS3  به پایان رسید امید وارم که مورد توجه شما عزیز قرار گرفته باشه
اگه این آموزش را دوست داشتید به دوستان خود توی شبکه های اجتماعی به اشتراک بزارید .

تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار

میانگین رتبه 5/5 تعداد رای : 2

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!