آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

کار با ویژگی margin و padding در CSS

در ادامه آموزش های مقدماتی CSS این بار می خواهیم به مبحث کار با ویژگی های margin و padding بپردازیم، استفاده از این دو ویژگی (property یا خاصیت) در طراحی صفحات وب از جمله در هنگام تعریف فاصله چهارگوشه قالب از لبه های صفحه نمایش، فاصله عناصر درونی صفحه از هم یا تعیین میزان فضای خالی (حاشیه داخلی) بلاک های دربرگیرنده محتوا مانند متن، تصویر، ویدئو و... جهت نمایش بهتر و ایجاد جلوه ظاهری سفارشی امری متداول و فراگیر است، ویژگی های margin و padding زیرمجموعه هایی دارند که بسته به شرایط ممکن است به تعدادی از آنها در تعریف استایل مورد نظر نیاز داشته باشیم، در ادامه نحوه کار با ویژگی margin و padding در CSS را با مثال توضیح خواهیم داد.

ویژگی margin در CSS

همانطور که از معنی عبارت margin (حاشیه، لبه) مشخص است این ویژگی برای تنظیم فاصله ی گوشه های قالب از لبه صفحه نمایش یا عناصر داخلی صفحه وب از هم استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی از کناره ها به میزان چند پیکسل فاصله داشته باشد کافی است برای آن بلاک مقادیر margin را در به میزان مشخصی در یک کلاس (Class) یا آی دی (ID) تعریف کنیم، به طور مثال:

<style>
#main-block {
    margin: 4px;
}
</style>
.
.
<body>
<div id="main-block"></div>
</body>

به این صورت بلاک div با کلاس فرضی main-block از تگ والد خود که می تواند به فرض تگ body باشد به میزان 4 پیکسل فاصله می گیرد، مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد اما متداول ترین شیوه در حالت معمول تعیین مقادیر به پیکسل (px) یا درصد است.
روش های تعریف مقدار برای ویژگی margin:
- تعیین مقادیر به پیکسل (Pixel یا Picture Element)، به فرض 4px، 3px، 0 و...، پیکسل واحد ثابتی است و هر صفحه نمایش (مانیتور، لپ تاپ، دستگاه تلفن همراه و..) وسعت خاصی از پیکسل را در عرض و ارتفاع شامل می شود.
- تعیین مقادیر به Point، به فرض 2pt، 6pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Em (مخفف کلمه خاصی نیست و احتمالا تلفظ حرف M لاتین باشد)، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (Scalable) این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن عمدتا در تعیین اندازه فونت (Font Size) ممکن است استفاده شود.
- تعیین مقادیر به سانتی متر (Centimeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش مقادیری متغیر خواهد بود، این واحد در طراحی صفحات وب به صورت واکنش گرا (Responsive) برای سازگاری با طیف وسیعی از صفحه نمایش ها از جمله گوشی های تلفن همراه و دستگاه های مانند آن مناسب است و در کنار پیکسل جزء پرکاربردترین ها محسوب می شود.
- تعیین مقادیر به صورت خودکار (auto، حالت پیش فرض) و وراثتی (inherit) از بلاک والد که میزان حاشیه به صورت پیش فرض یا به صورت ارث بری از بلاک والد و سطح بالاتر تعیین می شود.

نحوه تعریف ویژگی margin

ویژگی margin را می توانیم به دو صورت عادی و مختصر تعریف کنیم، در شیوه عادی برای کل جهت های بالا، راست، پائین و چپ به صورت یکجا حاشیه تعریف می شود، به طور مثال:

.main-block {
    margin: auto;
}

مثال بالا به این معنی است که مرورگر مقادیر پیش فرض مد نظرش را برای حاشیه در جهت های بالا، راست، پائین و چپ بلاک در نظر می گیرد.
خاصیت margin در چهار جهت اصلی ویژگی های زیرمجموعه تحت عنوان margin-top، margin-right، margin-left، margin-bottom دارد، بر همین اساس کد بالا مترادف با حالت زیر است:

.main-block {
    margin-top: auto;    
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

شاید بگوئیم در شرایطی که می توانیم با یک حالت منظورمان را به مرورگر تفهیم کنیم چرا از زیرمجموعه ها استفاده کنیم؟
پاسخ این است که در حالت کلی هر مقداری داشته باشیم الزاما به چهار جهت سرایت می کند و اگر بخواهیم به فرض یک جهت میزان حاشیه متفاوتی داشته باشد راه حل آن استفاده از ویژگی های زیرمجموعه margin است، یک مثال:

.main-block {
    margin: auto;
    margin-bottom: 10%;
}

بر این مبنا سه جهت بالا، راست و چپ مقادیر auto و جهت پائین 10 درصد حاشیه می گیرند.

مختصر نویسی ویژگی margin

ویژگی margin را می توانیم به صورت مختصر و خطی نیز بنویسیم، در حالت مختصر نویسی به جای تعریف کلی یا تعریف ویژگی های زیرمجموعه در جهت های بالا، راست، پائین و چپ، با نوشتن مقادیر margin در یک خط به همان هدف اما با میزان کدنویسی کمتر دست پیدا می کنیم، به طور مثال:

.main-block {
    margin: 2px 3px 1px 5px;    
}

اعداد در کلاس فوق به ترتیب نشانگر میزان حاشیه جهت بالا (top) راست (right) پائین (bottom) و چپ (left) عنصر هستند، در واقع این مثال برابر است با استایل CSS زیر:

<style>
.main-block {
    margin-top: 2px;    
    margin-right: 3px;
    margin-bottom: 1px;
    margin-left: 5px;
}
</style>
<div class="main-block"></div>

و همین طور مختصر نویسی به صورت زیر:

.main-block {
    margin: 10px 15px 20px;
}

برابر است با این کلاس CSS:

.main-block {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
}

و همچنین:

.main-block {
    margin: 10px 15px;
}

برابر است با:

.main-block{
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
}

در شیوه مختصرنویسی با تعداد پارامتر کمتر از 4، جهت های بالا - پائین و چپ - راست با هم ارتباط مقداری دارند.
نکته: برای بررسی و مشاهده پیش نمایش آنلاین لطفا به انتهای این آموزش مراجعه کنید.

ویژگی padding در CSS

از ویژگی padding در CSS جهت تعیین میزان حاشیه ی درونی عناصر صفحه استفاده می کنیم، به عبارتی padding فاصله محتوای یک بلاک از لبه های داخلی آن را مشخص می کند، به فرض اگر بخواهیم مطالب درونی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد کافیست برای استایل یا کلاس مربوط به آن لایه یک مقدار padding در نظر بگیریم، به طور مثال:

<style>
.main-block {
    padding: 4px;
}
</style>
.
.
<body>
<div class="main-block">محتوای بلاک</div>
</body>

آنچه در مورد ویژگی margin گفتیم در مورد padding نیز قابل اعمال است، به طور مثال برای تعریف مقادیر جهت های بالا، راست، پائین و چپ به صورت زیر padding را مقداردهی می کنیم:

.main-block {
    padding-top: 4px;
    padding-right: 10px;    
    padding-bottom: 6px;
    padding-left: 8px;
}

و در شیوه مختصر نویسی:

.main-block {
    padding: 4px 10px 6px 8px;
}

که مقادیر در کلاس فوق به ترتیب نشانگر جهت بالا (top)، راست (right)، پائین (bottom) و چپ (left) هستند.
نکته: در حالت پیش فرض میزان حاشیه داخلی (padding) به ارتفاع (height) و عرض (width) موجود بلاک اضافه می شود، برای تغییر این حالت و عدم احتساب padding به ارتفاع و عرض می توانیم از خاصیت box-sizing با مقادیر border-box استفاده کنیم:

.main-block {
    height: 50px;
    width: 200px;
    padding: 4px 10px 6px 8px;
    box-sizing: border-box;
}

مقادیر پیش فرض برای خاصیت box-sizing به صورت content-box است که در این حالت میزان padding و border به ارتفاع و عرض اضافه می شوند که باید به این نکته در طراحی قالب و فرمت بندی کارها دقت داشته باشیم.

مثال و پیش نمایش آنلاین

جهت آشنایی بیشتر با ویژگی های margin و padding در CSS کد و پیش نمایش آنلاین آن را در ادامه درج و بررسی می کنیم.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد حاشیه و نمایش محتوا در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    margin: 0px;
    padding: 0px;
    background-color: #333;
    color: #CCC;
    padding: 4px;
}
#parent-block {
    display: block;
    background-color: #999;
    height: 400px;
    width: 400px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    padding: 10px;
    border: 4px solid #FFF;
}
.child-block {
    display: block;
    text-align: justify;
    color: #333;
    background-color: #CCF;
    height: 380px;
    width: 380px;
    margin: 10px;
    padding: 10px;
    border: 4px solid #666;
    box-sizing: border-box;
}
</style>
</head>
<body>
<div id="parent-block">
<div class="child-block">
ویژگی margin فاصله دو بلاک از هم یا از تگ والد و ویژگی padding میزان فاصله و حاشیه ی محتوا یا عناصر درونی یک بلاک را در صفحات وب مشخص می کنند.
</div>
</div>
<hr>
با تنظیم مقادیر margin-right و margin-left به صورت auto بلاک div در وسط صفحه تنظیم می شود.
</body>
</html>

پیش نمایش آنلاین
نکته: ویژگی های margin و padding ممکن است در برخی نسخه های قدیمی مرورگر اینترنت اکسپلورر به خوبی نمایش داده نشوند، اگر این نسخه ها مورد نظر ما در طراحی باشد برای آنها باید استایل مخصوصی تعریف کنیم (آموزش جداگانه ای جهت درج استایل مخصوص اینترنت اکسپلورر در سایت منتشر شده است، لطفا عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر + وبگو" را در وب جستجو کنید).

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
سلکتور آی دی (ID) و کلاس (Class) در CSS
کار با border و outline در CSS
کاربرد ویژگی position و float در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
نحوه تنظیم استایل لینک (Link) در CSS

دیدگاه

۳۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

نگار

۱۳:۳۷ ۱۳۹۲/۰۵/۰۲

به صاحب سايت تبريك ميگم خيلي زحمت ميكشي براي مردم. دستت درد نكنه

tarahomiasl

۱۵:۰۵ ۱۳۹۲/۰۴/۲۱

سلام و خسته نباشید، من افزونه

widget-css-classes.1.2.1

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

ظاهرا سوال شما در مورد وردپرس است که متاسفانه اطلاعی در این خصوص نداریم، لطفا سوالات مربوط به CMS ها را در انجمن ها و سایت های مربوطه مطرح کنید.

شکوفه

۰۱:۲۳ ۱۳۹۲/۰۴/۱۳

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

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

حسنلو

۲۰:۱۷ ۱۳۹۱/۱۲/۱۵

با سلام
میخواستم کناره هایه صفحه سایتم رو مثل سایت شما درست کنم می تونید راهنماییم کنید چطور انجامش بدم
با فتوشاپ درست کردم فقط نمیدونم با چه کدی وارد کنم که ایمیجم از حاشیه به یک اندازه باشه

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

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.