CSS: دارایی حاشیه

این آموزش CSS نحوه استفاده از خاصیت CSS به نام حاشیه با نحو و نمونه ها را توضیح می دهد.

شرح

خاصیت حاشیه CSS حاشیه را از همه طرف یک عنصر تعریف می کند.

نحو

خاصیت حاشیه CSS را می توان با یک ، دو ، سه یا چهار مقدار ارائه شده بیان کرد. و هر مقدار را می توان به عنوان یک مقدار ثابت یا به عنوان درصد بیان کرد.

یک مقدار

نحو برای خاصیت CSS Margin (با 1 مقدار):

هنگامی که یک مقدار واحد ارائه می شود ، مقدار حاشیه برای هر چهار طرف عنصر اعمال می شود (یعنی: بالا ، راست ، پایین ، چپ).

دو مقدار

نحو برای خاصیت CSS Margin (با 2 مقدار):

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

سه مقدار

نحو برای خاصیت CSS Margin (با 3 مقدار):

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

چهار مقدار

نحو برای خاصیت CSS Margin (با 4 مقدار):

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

مقادیر حاشیه بالا ، راست ، پایین و چپ می تواند یکی از موارد زیر باشد:

• هر مقدار در خاصیت حاشیه CSS را می توان به عنوان یک مقدار ثابت یا به عنوان درصد بیان کرد.
• شما می توانید مقادیر ثابت و درصد را در خاصیت حاشیه CSS ترکیب کنید.
• مقادیر منفی در خاصیت حاشیه CSS مجاز است.
• هنگامی که مقدار به عنوان درصد ارائه می شود ، نسبت به عرض بلوک حاوی آن است.
• همچنین به حاشیه ، حاشیه حاشیه ، حاشیه سمت چپ و حاشیه راست مراجعه کنید.

سازگاری مرورگر

خاصیت حاشیه CSS با مرورگرهای زیر پشتیبانی اساسی دارد:

• کروم
• اندروید
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• اینترنت اکسپلورر (IE)
• یعنی تلفن
• اپرا
• موبایل
• سافاری (WebKit)
• سافاری موبایل

مثال

ما در مورد ویژگی margin در زیر بحث خواهیم کرد و نمونه هایی از نحوه استفاده از این ویژگی در CSS با مقادیر 1، 2، 3 یا 4 (به عنوان یک مقدار ثابت یا به عنوان درصد) را بررسی خواهیم کرد.

استفاده از مقدار ثابت

بیایید به یک مثال حاشیه CSS نگاهی بیندازیم که در آن یک مقدار به عنوان یک مقدار ثابت بیان شده است.

در این مثال حاشیه CSS، یک مقدار 10px ارائه کرده ایم که برای هر 4 طرف عنصر اعمال می شود.

بیایید نحوه استفاده از مقدار خودکار اختیاری در ویژگی حاشیه CSS را بررسی کنیم.

در این مثال حاشیه CSS، ما تگ را در مرکز قرار می دهیم و 0 حاشیه را اعمال می کنیم.

در مرحله بعد، ما به یک مثال حاشیه CSS نگاه می کنیم که در آن دو مقدار را ارائه می دهیم که به عنوان یک مقدار ثابت بیان شده اند.

در این مثال حاشیه CSS، دو مقدار ارائه کرده ایم. اولین مقدار 10px برای بالا و پایین عنصر اعمال می شود. مقدار دوم 5em برای سمت چپ و راست عنصر اعمال می شود.

در مرحله بعد، ما به یک مثال حاشیه CSS نگاه می کنیم که در آن سه مقدار را ارائه می دهیم که به عنوان یک مقدار ثابت بیان شده اند.

در این مثال حاشیه CSS، ما سه مقدار ارائه کرده ایم. اولین مقدار 2px در بالای عنصر اعمال می شود. مقدار دوم 4px برای سمت راست و چپ عنصر اعمال می شود. مقدار سوم 6px در پایین عنصر اعمال می شود.

در مرحله بعد، ما به یک مثال حاشیه CSS نگاه می کنیم که در آن چهار مقدار را ارائه می دهیم که به عنوان یک مقدار ثابت بیان شده اند.

در این مثال حاشیه CSS، ما چهار مقدار ارائه کرده ایم. اولین مقدار 5px در بالای عنصر اعمال می شود. مقدار دوم 10px در سمت راست عنصر اعمال می شود. مقدار سوم 12px در پایین عنصر اعمال می شود. چهارمین مقدار 8 پیکسل در سمت چپ عنصر اعمال می شود.

استفاده از درصد

بیایید به یک مثال حاشیه CSS نگاهی بیندازیم که در آن یک مقدار را به صورت درصد بیان می کنیم.

در این مثال حاشیه CSS، یک مقدار 4% ارائه کرده ایم که برای هر 4 طرف عنصر اعمال می شود.

بیایید نحوه استفاده از مقدار خودکار اختیاری در ویژگی حاشیه CSS را بررسی کنیم.

در این مثال حاشیه CSS، ما تگ را در مرکز قرار می دهیم و 4% حاشیه اعمال می کنیم.

در مرحله بعد، ما به یک مثال حاشیه CSS نگاه می کنیم که در آن دو مقدار را به صورت درصد بیان می کنیم.

در این مثال حاشیه CSS، دو مقدار ارائه کرده ایم. اولین مقدار 10% برای بالا و پایین عنصر اعمال می شود. مقدار دوم 5% برای سمت چپ و راست عنصر اعمال می شود.

در مرحله بعد، ما به یک مثال حاشیه CSS نگاه می کنیم که در آن سه مقدار را به صورت درصد بیان می کنیم.

در این مثال حاشیه CSS ، ما سه مقدار ارائه داده ایم. مقدار اول 2 ٪ در بالای عنصر اعمال می شود. مقدار دوم 5 ٪ در قسمت های راست و چپ عنصر اعمال می شود. مقدار سوم 10 ٪ در پایین عنصر اعمال می شود.

در مرحله بعد ، ما به یک مثال حاشیه CSS نگاه خواهیم کرد که در آن چهار مقدار بیان شده به عنوان درصد ارائه می دهیم.

در این مثال حاشیه CSS ، ما چهار مقدار ارائه داده ایم. مقدار اول 5 ٪ در بالای عنصر اعمال می شود. مقدار دوم 10 ٪ در سمت راست عنصر اعمال می شود. مقدار سوم 2 ٪ در پایین عنصر اعمال می شود. مقدار چهارم 8 ٪ در سمت چپ عنصر اعمال می شود.