🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

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

در این بخش از آموزش طراحی سایت به آموزش Margin در CSS می پردازیم.

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

در این بخش از آموزش طراحی صفحات وب به آموزش Margin در CSS می پردازیم. در حقیقت با استفاده از این پراپرتی می خواهیم فاصله عناصر HTML را با دیگر عناصر HTML صفحه مشخص کنیم. 

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

عنصر بالا یک مقدار margin به اندازه 70 پیکسل دارد. 

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

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

مشخصه های margin می توانند مقادیر زیر را داشته باشند:

  • auto  - مرورگر فضای خالی اطراف عنصر HTML را به صورت خودکار حساب می کند. معمولا از این مقدار برای این که عنصری را در مرکز قرار بدهیم استفاده می کنیم.
  • length  - یک اندازه ثابت با استفاده از واحدهای اندازه گیری مطلق px, pt, cm … برای عنصر درنظر گرفته می شود.
  • %  - زمانی که از این واحد نسبی استفاده کنیم، مرورگر مقدار فاصله را نسبت به عرض عنصر والد (parent) تعیین می کند.
  • inherit  - استفاده از کلمه کلیدی  inherit باعث می شود که مقدار مشخصه margin برابر با مقدار مشخصه margin عنصر پدر گردد.

نکته: مشخصه margin مقادیر منفی هم می پذیرد که استفاده از آن زیاد توصیه نمی گردد. مثال زیر نحوه استفاده از مشخصه margin را نمایش می دهد.

آموزش margin در css

خروجی مثال بالا به شکل زیر است:

 آموزش CSS

خلاصه نویسی پراپرتی Margin

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

مثال:

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

خروجی مثال بالا به شکل زیر است:

آموزش CSS

استفاده از 3 مقدار:

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

آموزش margin در css

خروجی مثال بالا به شکل زیر است:

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

استفاده از 2 مقدار:

در این حالت اولین مقدار برای لبه های بالا و پایین و دومین مقدار برای لبه های راست و چپ استفاده می شود.

آموزش CSS

خروجی مثال بالا به شکل زیر است:

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

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

آموزش margin در css

خروجی مثال بالا به شکل زیر است:

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

مقدار auto

شما می توانید مشخصه ی Margin را روی auto قرار دهید تا عنصر را بصورت افقی در وسط عنصر نگهدارنده خود قرار دهید.

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

خروجی مثال بالا به شکل زیر است:

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

مقدار inherit

استفاده از مقدار  inherit باعث می شود که مقدار مشخصه margin برابر با مقدار مشخصه margin عنصر پدر گردد.

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش margin در css

خاصیت Margin Collapse

در زبان CSS یک اصطلاح وجود داد که به آن margin collapsing گفته می شود.Margin Collapse معمولا زمانی اتفاق می افتد که می خواهیم دو عنصر که زیر هم قرار دارند را توسط مشخصه margin از هم دور کنیم.

برای این کار شاید به margin-bottom عنصر بالا و به margin-top عنصر پایین مقادیری اختصاص دهیم. فرض کنید به عنصر اول مقدار 50 پیکسل و به عنصر دوم مقدار 20 پیکسل می دهیم. حال باید فاصله بین این دو عنصر در راستای عمود برابر با 70 پیکسل باشد. اما این اتفاق نمی افتد و اتفاقی که می افتد این است که فاصله بین این دو عنصر تنها بزرگترین مقدار مشخصه margin بین این دو عنصر خواهد بود. یعنی در مثال ما فاصله برابر با 50 پیکسل خواهد بود. در تصویر زیر فاصله خارجی برای عنصر بالا مشخص شده است و همانطور که مشاهده می کنید، بین دو عنصر فقط مقدار فاصله تعیین شده توسط عنصر بالا عامل جدایی بین دو عنصر است و در واقع فاصله خارجی عنصر پایین collapse شده است.

نکته: این اتفاق روی حاشیه های چپ و راست اتفاق نمی افتد!

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

آموزش CSS

خروجی مثال بالا به شکل زیر است:

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

در مثال بالا، عنصر <h1> یک حاشیه ی پایین به اندازه ی 50 پیکسل و عنصر <h2> یک حاشیه ی بالا به اندازه ی 20 پیکسل دارد. اگر بخواهیم بصورت منطقی عمل کنیم حاشیه ی عمودی بین <h1> و <h2> باید جمعشان 70 پیکسل باشد. اما بر اساس margin collapse، حاشیه واقعی 50 خواهد بود.

آموزش طراحی سایت آموزش css آموزش margin در CSS آموزش حاشیه در CSS آموزش HTML دوره آموزش طراحی سایت

مقالات این دسته بندی