آموزش کار با ویژگی Margins در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Margins در CSS با من همراه باشید.

آموزش کار با ویژگی Margins در CSS

Free-Learn

کار با ویژگی Margins در CSS

ویژگی Margin ویژگی است که با استفاده از آن میتوان یک فاصله یا فضای خالی را در اطراف یک عنصر ایجاد کرد، در واقع میتونیم بگیم این فضای یک فضای بیرونی است.

پس ما با استفاده از این ویژگی میتوانیم یک فضای خالی ( فاصله ) را از سمت بیرونی یک عنصر ایجاد نماییم.

در CSS هر عنصر دارای ۴ جهت کلی است که این جهات به شرح زیر می باشد :

  • Top – جهت بالا
  • Right – جهت راست
  • Bottom – جهت پایین
  • Left – جهت چپ

پس ما میتونیم برای هر یک از این جهات مارجین تعریف کنیم و یا حتی میتونیم برای مثلا جهت راست و چپ تعریف کنیم و برای جهت بالا و پایین تعریف نکنیم.

ویژگی مارجین یا Margin در CSS میتونه مقادیر زیر رو داشته باشه :

  • auto – مرورگر بصورت خودکار اضافه خواهد کرد
  • length – با استفاده از واحدهای اندازه گیری مثله پیکسل،پوینت
  • % – مقدار فاصله بصورت درصدی مشخص می شود
  • inherit – مقدارش را از عنصر والدش یا پدرش به ارث می برد

مثال شماره ۱ : استفاده از حالت auto (با استفاده از این حالت میتوان یک عنصر را در وسط صفحه قرار داد)

امتحان کنید

مثال شماره ۲ : استفاده از واحدهای اندازه گیری همچون px,pt,in,cm و…

امتحان کنید

مثال شماره ۳ : استفاده از حالت درصدی (%) – بصورت درصدی فاصله را مشخص میکند.

امتحان کنید

مثال شماره ۴ : استفاده از حالت ارث بری – یعنی از عنصر پدرش (والد) اندازش را به ارث ببرد.

مثلا ما یک پاراگراف داریم که در داخل تگ div قرار دارد خب، پس تگ پاراگراف میشه فرزند تگ div و تگ div میشه والد یا پدر تگ پاراگراف.

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Margin در CSS

با استفاده از حالت خلاصه نویسی یک ویژگی میتونیم هم سرعت کدنویسی مون رو ببریم بالا و هم خوانایی کدهارو، پس پیشنهاد من اینه همیشه از حالت خلاصه نویسی استفاده کنید.

شکل کلی خلاصه نویسی ویژگی Margin بصورت زیر می باشد :

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

مثال شماره ۱ : استفاده از ۴ جهت

امتحان کنید

مثال شماره ۲ : استفاده از فقط راست و چپ

امتحان کنید

مثال شماره ۳ : استفاده از فقط بالا و پایین

امتحان کنید

مثال شماره ۴ : استفاده از ۴ جهت با استفاده از یک مقدار

امتحان کنید

Free-Learn