دوشنبه ۱۴ آذر ۱۴۰۱

Monday, December 5, 2022 GMT +3:30

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

css-margin-padding

در ادامه آموزش های مقدماتی 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
related مطالب بیشتر:
ویژگی های Font و Text در CSS
کاربرد خاصیت height و width در CSS
کار با border و outline در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
سلکتور آی دی (ID) و کلاس (Class) در CSS
دیدگاه
more ۳۴ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
حبیب
۲۱:۳۲ ۱۳۹۵/۱۰/۱۶
سلام توی خلاصه نویسی اشتباه نوشتید:
margin:10px 15px
برابر است با
بالا و پایین 10
چپ و راست 15
ولی شما گفتید فقط به بالا و راست هستند لطفا اصلاح کنید
بسیار ممنون از تذکر شما، اصلاح شد.
ابراهیمی
۱۰:۰۲ ۱۳۹۶/۰۸/۱۰
سلام خسته نباشید. من برای سایتم از margin و padding استفاده کردم که در فایرفاکس درست نمایش می دهد و در کروم همه چیز به هم می ریزد. ممکنه منو راهنمایی کنید؟
در طراحی قالب باید سعی کنید قدم به قدم کدنویسی را در مرورگرهای مختلف تست نمائید تا اگر مشکلی بود در همان مرحله برطرف گردد، پس از تکمیل کار سازگار کردن قالب با مرورگرهای مختلف پیچیده تر خواهد بود، به هر صورت برای راهنمایی بیشتر و در صورت تمایل لطفا آدرس سایت و صفحه مربوطه را جهت بررسی درج نمائید.
۱۷:۵۳ ۱۳۹۷/۰۸/۲۰
ممنون استفاده بردیم استاد . عالی بود مرسی
Zeinab
۱۲:۰۳ ۱۴۰۱/۰۷/۲۱
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin رو صفر قرار میدن و بعد به هر المان padding و margin مخصوص خودش رو میدن؟ اگه میشه توضیح بدین که این کار برای چیه؟
مرورگرها معمولا به صورت پیش فرض مقدار padding و margin را در حد ۴ پیکسل اعمال می کنند که برای حذف و صفر شدن این مقدار پیش فرض از سلکتور سراسری * در CSS استفاده می شود، یک دلیل دیگر برای جلوگیری از عدم تداخل استایل های مختلف در صفحاتی است که از برنامه های سوم شخص (third party) در آنها استفاده می شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
میثم
سلام وقت بخیر. من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم. با...
۱۴۰۱/۰۹/۱۲

پـــــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی...
۱۴۰۱/۰۹/۰۸

حسین ناصری
سلام من از نمونه کد برای نمایش قسمتی از سایت دیگه استفاده میکنم مشکلم اینه بعضی از سایت ها برداشت مطلب با این...
۱۴۰۱/۰۸/۳۰

مهدی
سلام خسته نباشید میخواهم تابع ای بنویسم که توان ۲ یک عدد را فراخوانی با ارجاع انجام دهد ؟ میشه بهم بگید...
۱۴۰۱/۰۸/۲۸

اروین
من یک بلاک html رو از یک بخشی از سایت با روش display:none برداشتم. من میخوام این بخشی که برداشتم توی...
۱۴۰۱/۰۸/۲۶

پـــــرتو
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا...
۱۴۰۱/۰۸/۲۳

پرتو
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل...
۱۴۰۱/۰۸/۱۹

شبنم
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست...
۱۴۰۱/۰۸/۱۸

پــــرتو
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن...
۱۴۰۱/۰۸/۱۸

پرتو
باشه فعلا لپتاپم در دسترسم نیست تا آخر هفته میفرستم
۱۴۰۱/۰۸/۰۷

پرتو
سلام خسته نباشید شرمنده مزاحم میشم اوکی ممنونم از جوابتون یه چیز میتونم بگم میخاستم بگم که برای منوی سمت راست اگر یه بردر برای...
۱۴۰۱/۰۸/۰۵

عباس
سلام خوبید جدید یک هفته ای هست تعداد آنلاین ها را فقط عدد یک نشون میده بی زحمت یه بررسی کنید البته سی‌دی‌ان سایت تغییر...
۱۴۰۱/۰۸/۰۱

پرتو
سلام جناب خسته نباشید عه بازم منظورمو متوجه نشدین اینایی که گفتینو میدونم منظورم اینک کدهایی که توی سایت شما هست همون ادرسی که بهم...
۱۴۰۱/۰۷/۲۹

پرتو
اوکی ممنونم از توضیحاتتون فقط در مورد کد یه چیز بگم من منظورم اینک کجا کدها رو قرار بدم منظورم کدوم قسمت یا اینک کدوم...
۱۴۰۱/۰۷/۲۶

sara24
سلام خسته نباشید کدی رو تو جاوا اسکریپت با if else نوشتم که وقتی روی دکمه (like) کلیک شه اون صفحه رو به لیست...
۱۴۰۱/۰۷/۲۳

پرتو
سلام جناب خسته نباشید جناب الان اون لینکی که فرستادین خوندم فقط نفهمیدم باید چیکار کنم دقیقا یعنی متوجه شدم ولی متوجه نشدم باید دقیقا...
۱۴۰۱/۰۷/۲۲

Zeinab
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin...
۱۴۰۱/۰۷/۲۱

آیدا
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
۱۴۰۱/۰۷/۱۹

سپهر
سلام خسته نباشید من یک وبلاگ داخل بلاگ بیان دارم ،‌ فاو ایکون هم ساختم ولی نمیدونم چه جوری اپلودش کنم هاست هم ندارم خیلی...
۱۴۰۱/۰۷/۱۵

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم ببخشید اینستاگرام قطعه کلا؟ می دونم قطعه و باید با فیلترشکن رفت منظورم اینک من با فیلترشکن هم نمی...
۱۴۰۱/۰۷/۱۵
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.