جلسه ۲۰ – تفاوت 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 قائل بشیم.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

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

نکته: عرض عنصر ممکنه بیشتر از اون چیزی بشه که انتظار دارین. این موضوع رو تو مقاله مفاهیم inline و block در CSS میزفا بررسی می‌کنیم. بنابراین فعلا نگرانش نباشین.

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

10 نظر

10 پاسخ

  1. body{
    text-align: center;
    }
    div{
    background-color: indianred;
    color: 5vw;
    text-align: center;
    color: white;
    width:200px;
    padding:40px 60px;
    display: inline-block;
    margin-top: 50px;
    border: none;
    }

    .borderstyle2{
    border-bottom-style:none;
    border-top-style: none;
    border-left-style: none;
    border-right-style: solid;
    border-color: mediumseagreen;
    border-width: 10px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    }

    Mizfa Css

    1. سلام سینا. لطفا کدات رو بفرست تا بررسی کنیم.

  2. سلام، خروجی دقیقا اونی که خواسته بودید نشد یعنی اون قسمت قرمز رنگ هم شعاع میگیره نمیدونم چرا
    نزدیک ترین حالتی که تونستم در بیارم:

    1. سلام حسین. ببین علتش اینه که مقدار حاشیه گرد عنصرت رو زیاد وارد کردی. میتونی با مقادیری مثل 5 پیکسل یک حاشیه گرد داشته باشی که قسمت قرمز رنگ رو تحت تاثیر قرار نده:

      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;

      اما پاسخی که نوشتی برای کوییز اوکیه، مهم این بود که بتونی اون بوردر سبز رنگ رو اونجا قرار بدی و یکم حاشیش رو دستکاری کنی که انجام دادی? ممنون ازت

  3. p{
    ;color:white
    ;font-family:bnazanin
    ;background-color:green
    ;border-right-style:solid
    ;border-right-color:gold
    ;border-right-width:10px
    ;border-top-right-radius: 7px
    ;border-bottom-right-radius: 7px
    {

    CSS Margins

  4. CSS Margins

    }div
    ;color:white
    ;font-family:bnazanin
    ;back ground-color:indianred
    ;border-right-style:solid
    ;border-right-color:mediumseagrean
    ;border-right-width:10px
    ;border-top-right:-radius:5px
    ;border-bottom-right-radius:5px
    {
    جواب سوالی که مطرح کرده بودین . من تازه دارم یاد میگیرم لطفا اگه مشکلی داره راهنماییم کنین . ممنون از سایت خوبتون

    1. سلام پریا جان. مرسی از پاسخت 🙂
      با پاسخی که دادی متوجه شدیم کوییز این مقاله یه مقدار مشکل فنی داره، یکی از دلایلی که پاسخ نهاییت شبیه خواسته ی سوال نمیشه همون مشکل فنیه، تو این موضوع مشکل از کوییزیه که نوشتیم و نه پاسخ تو 🙂
      اما مشکلاتی که پاسخت داره، اولیش اینه که کد HTML ننوشتی. دومین مشکل اشتباه املاییه که برای مقدار خاصیت border-right-color هست و باعث میشه رنگ بوردر اصلا کار نکنه.
      سومین مشکل هم اینه که بین کلمات خاصیت border-top-right-radius یه : اضافه گذاشتی که باعث میشه این خاصیت هم نتونه کار کنه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=