ویژگی Style margin

تعریف و استفاده

margin ویژگی تنظیم یا بازگرداندن حاشیه‌های عناصر.

این ویژگی می‌تواند از یک تا چهار مقدار استفاده کند:

  • یک مقدار، مثلاً: div {margin: 50px} - همه چهار حاشیه خارجی 50px هستند
  • دو مقدار، مثلاً: div {margin: 50px 10px} - حاشیه خارجی بالا و پایین 50px است، حاشیه خارجی چپ و راست 10px است
  • سه مقدار، مثلاً: div {margin: 50px 10px 20px} - حاشیه خارجی بالا 50px است، حاشیه خارجی چپ و راست 10px است، حاشیه خارجی پایین 20px است
  • چهار مقدار، به عنوان مثال: div {margin: 50px 10px 20px 30px} - حاشیه بالایی 50px، حاشیه سمت راست 10px، حاشیه پایینی 20px و حاشیه سمت چپ 30px}

ویژگی حاشیه و پادینگ هر دو فضای اضافی در اطراف عنصر قرار می‌دهند. اما تفاوت آنها این است که، حاشیه در اطراف حاشیه‌ها فضای اضافی قرار می‌دهد و پادینگ در فضای درون حاشیه‌های عنصر قرار می‌دهد.

لطفاً به

آموزش CSS:مجذور CSS

دستورالعمل CSS:ویژگی حاشیه

مثال

مثال 1

تمام چهار حاشیه عناصر <div> را تنظیم می‌کند:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

آزمایش کنید

مثال 2

تمام چهار حاشیه عناصر <div> را به "25px" تغییر می‌دهد:

document.getElementById("myDiv").style.margin = "25px";

آزمایش کنید

مثال 3

حاشیه عناصر <div> را بازمی‌گرداند:

alert(document.getElementById("myDiv").style.margin);

آزمایش کنید

مثال 4

تفاوت بین ویژگی حاشیه و پادینگ:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

آزمایش کنید

قانون‌نویسی

بازگشتی ویژگی حاشیه:

object.style.margin

تنظیم ویژگی حاشیه:

object.style.margin = "%|length|auto|initial|inherit"

مقدار ویژگی

مقدار توضیح
% با استفاده از درصد عرض عنصر والد حاشیه را تعریف می‌کند.
length با استفاده از واحد طول حاشیه را تعریف می‌کند.
auto مرورگر حاشیه‌ها را (همه چهار حاشیه برابر خواهند بود) تنظیم می‌کند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: 0
مقدار بازگشتی: رشته‌ای است که حاشیه‌های عناصر را نشان می‌دهد.
نسخه CSS: CSS1

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی