margin و padding از ویژگی‌های مهم CSS هستند که برای ساخت صفحه‌های وب منظم، خوانا و از نظر ظاهری جذاب استفاده می‌شوند.

margin فضای بیرونِ عنصر را کنترل می‌کند و کمک می‌کند عنصر از عناصر دیگر فاصله بگیرد و ساختار layout مشخص شود.
در مقابل، padding فضای داخلِ عنصر را کنترل می‌کند و باعث می‌شود محتوا خواناتر و ظاهر آن بهتر شود.

برای درک بهتر تفاوت margin و padding، چند مثال را بررسی می‌کنیم.

مثال HTML

در اینجا یک نمونه HTML شامل سه عنصر پاراگراف روی صفحه آمده است:

<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

استفاده از margin-top

برای اعمال فاصله در بالای هر عنصر پاراگراف، می‌توانید از ویژگی margin-top به این شکل استفاده کنید:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

در این مثال، فقط 20px margin به بالای هر عنصر پاراگراف اعمال می‌شود.

همچنین یک border مشکیِ solid در هر چهار طرف قرار داده شده تا margin بهتر دیده شود.

چهار ویژگی مختلف margin عبارت‌اند از:

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

استفاده از هر چهار ویژگی margin

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

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

در این مثال، برای هر چهار طرف عنصر پاراگراف مقدار فاصله تعیین شده است. همچنین یک border مشکیِ solid اضافه شده تا marginها بهتر دیده شوند.

خلاصه‌نویسی (shorthand) برای margin

روش دیگر استفاده از margin، استفاده از shorthand است. شما می‌توانید هم‌زمان یک، دو، سه یا چهار مقدار مشخص کنید.

1) یک مقدار

اگر فقط یک مقدار بنویسید، همان مقدار برای هر چهار طرف عنصر اعمال می‌شود.

مثال:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

این کد 10px margin را به طور مساوی برای هر چهار طرف عنصر پاراگراف اعمال می‌کند.

2) دو مقدار

اگر دو مقدار بنویسید:

• مقدار اول برای بالا و پایین
• مقدار دوم برای چپ و راست

مثال:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

این حالت margin بالا و پایین را 10px و چپ و راست را 20px قرار می‌دهد.

3) سه مقدار

اگر سه مقدار داده شود:

• مقدار اول برای بالا
• مقدار دوم برای چپ و راست
• مقدار سوم برای پایین

مثال:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

این یعنی:

• بالا: 10px
• چپ و راست: 20px
• پایین: 30px

4) چهار مقدار

اگر چهار مقدار استفاده کنید، می‌توانید برای هر طرف به‌صورت مستقل مقدار مشخص کنید.

ترتیب مقادیر به این صورت است:

• مقدار اول: top
• مقدار دوم: right
• مقدار سوم: bottom
• مقدار چهارم: left

مثال:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

این کد مقدار margin را به این شکل تنظیم می‌کند:

• بالا: 10px
• راست: 20px
• پایین: 30px
• چپ: 40px

padding

ویژگی padding برای اعمال فاصله داخل عنصر، یعنی بین محتوا و border استفاده می‌شود.

مثل margin، چهار ویژگی جداگانه برای padding هم داریم:

• padding-top
• padding-right
• padding-bottom
• padding-left

در اینجا یک مثال برای تنظیم padding روی عنصر پاراگراف آمده است:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

این کد padding را به این صورت تنظیم می‌کند:

• بالا: 10px
• راست: 20px
• پایین: 30px
• چپ: 40px

همان‌طور که می‌بینید، padding روی محتوایی اعمال می‌شود که داخل border قرار دارد، برخلاف margin که بیرون border اعمال می‌شود.

shorthand برای padding

درست مثل margin، برای padding هم می‌توانید از shorthand استفاده کنید.

شما می‌توانید برای padding هم یک، دو، سه یا چهار مقدار مشخص کنید.

در اینجا یک نمونه از استفاده shorthand برای عنصر پاراگراف قبلی آمده است:

index.html
styles.css

<link rel="stylesheet" href="styles.css">
<span>Paragraph one</span>
<p>Paragraph two</p>
<span>Paragraph three</span>

در این مثال، با استفاده از shorthand، کد padding عنصر پاراگراف را این‌گونه تنظیم می‌کند:

• بالا: 10px
• راست: 20px
• پایین: 30px
• چپ: 40px

سوالات

1) برای ایجاد فاصله بین border یک عنصر و عناصر کناری آن از کدام ویژگی CSS استفاده می‌کنید؟

• padding
• border
• margin
• width

پاسخ درست: margin

2) برای ایجاد فاصله بین محتوای یک عنصر و border آن از کدام ویژگی CSS استفاده می‌کنید؟

• padding
• margin
• border
• height

پاسخ درست: padding

3) ترتیب درست مقادیر در shorthand مربوط به margin یا padding با چهار مقدار چیست؟

• left, right, top, bottom
• top, left, bottom, right
• top, right, bottom, left
• right, bottom, left, top

پاسخ درست: top, right, bottom, left