در CSS، واحدهای em و rem برای اندازه‌دهی به متن، فاصله‌ها، padding، margin و سایر ویژگی‌ها به‌صورت نسبی استفاده می‌شوند.
این دو واحد مقیاس‌پذیر هستند و برای طراحی‌های واکنش‌گرا (Responsive Design) بسیار مفید می‌باشند. در این مقاله به بررسی کامل نحوه‌ی کار با این دو واحد و تفاوت‌های آن‌ها می‌پردازیم.
۱. em چیست و چگونه کار می‌کند؟
واحد em نسبت به اندازه‌ی فونت والد (parent element) محاسبه می‌شود. اگر مقدار font-size یک عنصر ۲۰px باشد، مقدار ۱em = ۲۰px خواهد بود.
🔹 قانون کلی:
1em = اندازه‌ی فونت عنصر والد
✅ مثال استفاده از em:
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* 2 * 20px = 40px */
}
🔹 در این مثال، .child اندازه‌ی ۲ برابر (۴۰px) نسبت به .parent دارد.
۲. rem چیست و چگونه کار می‌کند؟
واحد rem نسبت به اندازه‌ی فونت ریشه‌ی صفحه (عنصر <html>) محاسبه می‌شود. این ویژگی باعث یکپارچگی و پیش‌بینی‌پذیری بهتر در طراحی می‌شود.
🔹 قانون کلی:
1rem = اندازه‌ی فونت عنصر <html>
✅ مثال استفاده از rem:
html {
font-size: 16px;
}
.child {
font-size: 2rem; /* 2 * 16px = 32px */
}
🔹 در این مثال، .child اندازه‌ی ۲ برابر (۳۲px) نسبت به مقدار font-size تعریف‌شده در <html> دارد.
۳. تفاوت em و rem
| ویژگی | em | rem |
|---|---|---|
| نسبت به | فونت والد | فونت <html> |
| تأثیرپذیری | از والد | از <html> (ریشه) |
| پیش‌بینی‌پذیری | کمتر (وابسته به والدین تو در تو) | بیشتر (همیشه یک مقدار ثابت دارد) |
| مناسب برای | فاصله‌ها، padding, margin و تایپوگرافی وابسته به والد | طراحی یکپارچه و مقیاس‌پذیر |
✅ em برای طراحی ماژولار و وابسته به والدین مناسب است.
✅ rem برای طراحی‌های یکپارچه و بدون وابستگی به والدین توصیه می‌شود.
۴. کاربرد em و rem در ویژگی‌های مختلف CSS
۱. استفاده در font-size
با em (نسبت به والدین):
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em; /* 1.5 * 18px = 27px */
}
با rem (نسبت به root <html>):
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
✅ rem مقیاس ثابتی دارد و خوانایی بیشتری را در پروژه ایجاد می‌کند.
۲. استفاده در padding و margin
em معمولاً در padding و margin برای تعیین فاصله‌های نسبی به فونت والد مفید است.
button {
font-size: 16px;
padding: 1em; /* 16px padding */
}
🔹 مقدار 1em معادل ۱۶px است، زیرا به font-size دکمه وابسته است.
اگر از rem استفاده کنیم:
button {
font-size: 16px;
padding: 1rem; /* 16px padding */
}
✅ این مقدار همیشه ۱۶px باقی می‌ماند، حتی اگر والد تغییر کند.
۳. استفاده در width و height
✅ بهتر است در این موارد از rem استفاده شود، زیرا مقیاس یکنواختی ایجاد می‌کند.
.container {
width: 50rem; /* معادل 50 * 16px = 800px */
height: 10rem; /* معادل 10 * 16px = 160px */
}
✅ این مقدار نسبت به اندازه‌ی ریشه پایدار می‌ماند و در تمامی صفحه یکسان نمایش داده می‌شود.
۵. کدام را در طراحی استفاده کنیم؟ em یا rem؟
| سناریو | بهتر است از em استفاده کنید | بهتر است از rem استفاده کنید |
|---|---|---|
| فونت‌های تو در تو | ✅ بله | ❌ خیر |
| طراحی فرم‌ها و دکمه‌ها | ✅ بله | ❌ خیر |
| طراحی یکپارچه و واکنش‌گرا | ❌ خیر | ✅ بله |
| فاصله‌ها و حاشیه‌ها (margin, padding) | ✅ بله | ✅ بله |
| طراحی تایپوگرافی عمومی | ❌ خیر | ✅ بله |
✅ rem برای اندازه‌ی کلی متن در پروژه توصیه می‌شود.
✅ em برای فضاهای داخلی مانند margin، padding و دکمه‌ها کاربرد دارد.
۶. ترکیب em و rem در پروژه‌های واقعی
می‌توان از هر دو واحد برای ایجاد طراحی مقیاس‌پذیر و منعطف استفاده کرد.
html {
font-size: 16px;
}
body {
font-size: 1rem; /* برابر با 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
button {
font-size: 1rem; /* 16px */
padding: 0.5em 1em; /* 8px 16px (وابسته به font-size دکمه) */
}
✅ در این مثال:
- متن دکمه به اندازه‌ی
۱rem(۱۶px) است. paddingدکمه باemتنظیم شده، بنابراین وابسته به اندازه‌ی فونت خود دکمه است.
۷. نتیجه‌گیری
emنسبت به والد خود مقیاس می‌گیرد و برای فضاهای داخلی و ماژول‌های مستقل مناسب است.remنسبت به ریشه (html) تنظیم می‌شود و یکپارچگی و پیش‌بینی‌پذیری بهتری دارد.- در طراحی‌های مدرن، ترکیب
remبرای فونت اصلی وemبرای فاصله‌ها و دکمه‌ها پیشنهاد می‌شود.
🔹 انتخاب درست این دو واحد به بهبود خوانایی، مقیاس‌پذیری و تجربه کاربری بهتر کمک می‌کند.
