آموزش CSSآموزش طراحی سایت

جلسه ۲۰ – تفاوت margin و padding و border و outline

تفاوت کادر ها در CSS

فرق کادر های CSS با یکدیگر در چیست؟ آیا می‌توانیم از همه کادر های CSS هم زمان استفاده کرد؟ در این مقاله قصد داریم تا با تفاوت کادر ها یا حاشیه های موجود در CSS آشنا شویم.

تفاوت کادر ها در CSS

چهار نوع کادر مورد نظر رو باهم یاد گرفتیم. اما هنوز یک مشکل مهم باقی مونده.

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

در این مقاله، در کنار مرور کوتاهی از این چهار مفهوم margin ، padding ، border و outline، تفاوت های اون ها رو یاد می‌گیریم و اون ها رو بهتر می‌شناسیم.

تفاوت padding و margin

قبل از هرچیزی بیایم سوالاتی را با همدیگه مطرح کنیم!

تفاوت های بین margin و padding در چیست؟ از دستور padding و margin در چه مواردی استفاده می‌شود؟ آیا margin با padding فرق داره؟ پاسخ تفاوت margin و padding رو در ادامه با هم بررسی می‌کنیم.

تفاوت این دو مفهوم رو در خلال مقاله ها گفتیم و درمورد اون ها صحبت کردیم.

این دو دستور از هر نظر شبیه به هم هستن، با این تفاوت که padding فاصله محتوا از مرز های عنصری بود که داخلش قرار داشت، و margin فاصله مرزهای عنصر مورد نظر از مرز عناصر دیگه بود.

تفاوت مارجین و پدینگ
تفاوت مارجین و پدینگ

همچنین متوجه شدیم که خاصیت margin، می‌تونه مقادیر منفی رو قبول کنه، در حالی که خاصیت padding، فاقد این قابلیته:

/*--- داریم ---*/
margin: -40px;

/*--- نداریم ---*/
padding: -40px;

تفاوت border و outline

مثل بخش قبل، پیش از توضیح سوالاتی رو با همدیگر مطرح می‌کنیم.

تفاوت های بین border و outline در چیست؟ در چه مواردی از دستور border و outline استفاده می‌کنیم؟ آیا border با outline فرق داره ؟ پاسخ تفاوت border و outline رو در ادامه با همدیگه بررسی می‌کنیم.

برخلاف فرق padding و margin، این دو فرق های بسیار مهمی دارن که باید خیلی خوب یادشون بگیریم.

تاثیر نداشتن بر عناصر دیگه

در اکثر موارد خیلی از ویژگی هایی که برای عناصر خودمون قائل می‌شیم، به خصوص ویژگی هایی که با ابعاد عناصر و مکانشون سر و کار دارن، باعث تغییر استایل و ویژگی عناصر دیگه هم می‌شن.

به طور مثال، border یکی از این خاصیت هاست، اگه ضخامت یک border رو 10 پیکسل درنظر بگیریم عناصر اطراف اون ازش 10 پیکسل فاصله می‌گیرن و دور تر می‌شن.

برخلاف outline، border از چنین قاعده ­ای پیروی نمی‌کنه. در ضخامت محدودیتی نداره و کوچیک ترین اثری روی عناصر دیگه نداره.

برای درک این مسئله، به مثال زیر توجه کنید:

تفاوت اوت لاین و بوردر
تفاوت اوت لاین و بوردر

عکس سمت راست، در حال نشون دادن یک border هست. میبینیم که ضخامت border بر کلمه­ ی Hi تاثیر گذاشته و اونو از خودش دور کرده. هرچی هم ضخامت border بیشتر شه، کلمه مورد نظر رو دورتر می‌کنه، طوری که بهم برخورد نکنن. اما در عکس سمت چپ، خلاف این موضوع رو مشاهده می‌کنیم و می‌بینیم که ضخامت outline نه تنها کلمه Hi رو جابه جا نکرده، بلکه اون رو در خودش هضم کرده.

کلی بودن و یکنواخت بودن outline

ما می‌تونیم خاصیت border رو به چهار خاصیت مجزا بشکونیم:

  • border-top
  • border-right
  • border-bottom
  • border-left

اما چنین چیزی درمورد outlineها صادق نیست.

ما نمی‌تونیم خاصیتی به نام outline-left یا outline-bottom داشته باشیم. Outlineها کلی و یکنواخت هستن، یا به صورت کامل هستن و یا اصلا نیستن.

عدم وجود radius

همونطور که در مقاله border خوندیم، می‌تونیم به کادر هایی که از نوع border هستن، انحنا و radius اختصاص بدیم.

این بحث در مورد outline ها صادق نیست و ما نمی‌تونیم انحنایی برای کادر های outline قائل بشیم.

پایان ترم

سوال:

برای ساختن عنصر زیر، چه کدی رو پیشنهاد می‌کنین؟

تمرین پایان ترم نوید
تمرین پایان ترم نوید

نکته: هم کد HTML‌ و هم CSS نوشته بشه.

نکته: margin رو نادیده بگیرین.

نکته: رنگ ها رو indianred و mediumseagreen درنظر بگیرین. فونت هم دلخواه خودتونه 🙂

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

نتیجه گیری

در این مقاله، تفاوت چهار مفهوم border، outline، border و padding رو با هم بررسی کردیم و با جنبه های دقیق تری از اون ها آشنا شدیم.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر