article

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

css-margin-padding

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

ویژگی margin در css


همانطور که از عنوان این عبارت مشخص است، ویژگی margin برای تنظیم فاصله ی حاشیه ها استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی صفحه، از کناره ها و در واقع از تگ body به میزان چند پیکسل فاصله داشته باشد، کافی است برای آن بلاک، مقادیر حاشیه را در قسمت بالا (top)، به میزان مشخصی در یک کلاس (class) یا آی دی (id) تعریف کنیم، به طور مثال:
.main-block{
    margin-top:4px;
    display:block;    
}
به این صورت، بلاک div با کلاس فرضی main-block از تگ body و در واقع از حاشیه بالای صفحه نمایش، به میزان 4 پیکسل فاصله می گیرد.
مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد، اما مناسب ترین و متداول ترین شیوه در حالت معمول، تعیین مقادیر به پیکسل (px) است.
- تعیین مقادیر به پیکسل (picture element)، به فرض 4px، 0px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 2pt، 6pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

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


ویژگی margin را می توان به دو صورت عادی و مختصر تعریف کرد، در شیوه عادی برای کل جهت های بالا، پائین، چپ و راست به صورت یکجا یا جداگانه، margin تعریف می شود، به طور مثال:
.main-block{
    margin:auto;
}
مثال بالا به این معنی است که مرورگر مقادیر پیش فرض حاشیه را برای جهت های بالا، پائین، چپ و راست در نظر می گیرد.
و یا:
.main-block{
    margin-bottom:4px;
    margin-left:2px;
    margin-right:2px;
    margin-top:4px;
}
و یا:
.main-block{
    margin-left:50%;
    margin-right:30em;
    margin-bottom:20pt;
    margin-top:inherit;
}
و همچنین:
.main-block{
    margin-right:auto;
    margin-left:auto;
}
اما در حالت مختصر نویسی، به جای نوشتن مقادیر و جهت های بالا، پائین، چپ و راست، با نوشتن مقادیر آنها در یک خط، به همان هدف اما با کدنویسی کمتر می رسیم، به فرض:
.main-block{
    margin:10px 15px 20px 25px;
}
اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند، در واقع مثال برابر است با کد css زیر:
.main-block{
    margin-top:10px;
    margin-right:15px;
    margin-bottom:20px;
    margin-left:25px;
}
و همین طور مختصر نویسی به صورت زیر:
.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;
}

ویژگی padding در css


بر عکس ویژگی margin که فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند، ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می کند، به فرض اگر بخواهیم مطالب داخلی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد، کافیست برای استایل یا کلاس مربوط به آن لایه، یک مقدار padding در نظر بگیریم، به طور مثال:
.main-block{
    padding:4px;
}
آنچه در مورد ویژگی margin گفتیم، تا حدود زیادی در مورد padding نیز قابل اعمال است، به طور مثال برای تعریف مقادیر جهت های بالا، پائین، چپ و راست به صورت زیر، padding را مقدار می دهیم:
.main-block{
    padding-top:4px;
    padding-bottom:6px;
    padding-left:8px;
    padding-right:10px;
}
و در شیوه مختصر نویسی:
.main-block{
    padding:4px 10px 6px 8px;
}
همانطور که پیش تر گفتیم، اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند.

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


جهت بررسی و آشنایی بیشتر با ویژگی های padding و margin می توانید از کد زیر و پیش نمایش آنلاین آن استفاده کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | حاشیه و نمایش محتوا در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    margin:0px;
    padding:0px;
    background-color:#333;
    color:#CCC;
}
.main-block{
    display:block;
    color:#666;
    background-color:#CCC;
    height:400px;
    width:400px;
    margin-top:100px;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:10px;
    padding:8px;
}
</style>
</head>
<body>
<div class="main-block">
بر عکس ویژگی margin که فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند، ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می کند.
</div>
<hr />
با تنظیم مقادیر margin-right و margin-left به صورت auto، بلاک div در وسط صفحه تنظیم می شود.
</body>
</html>
پیش نمایش
نکته: ویژگی های padding و margin ممکن است در برخی نسخه های مرورگر اینترنت اکسپلورر به خوبی نمایش داده نشوند، لذا اگر با این نوع مشکلات مواجه شدید، برای این نوع مرورگرها، باید استایل مخصوصی تعریف کنید.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» نحوه تنظیم استایل لینک (Link) در CSS
» خاصیت Background و ویژگی های آن در CSS
» سلکتور آی دی (ID) و کلاس (Class) در CSS
» ویژگی های Font و Text در CSS
» کاربرد خاصیت display در CSS
commentنظرات (۳۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: حبیب
زمان: ۲۱:۳۲:۱۱ - تاریخ: ۱۳۹۵/۱۰/۱۶
سلام توی خلاصه نویسی اشتباه نوشتید:
margin:10px 15px
برابر است با
بالا و پایین 10
چپ و راست 15
ولی شما گفتید فقط به بالا و راست هستند لطفا اصلاح کنید
پاسخ: 
بسیار ممنون از تذکر شما، اصلاح شد.
نویسنده: ابراهیمی
زمان: ۱۰:۰۲:۱۷ - تاریخ: ۱۳۹۶/۰۸/۱۰
سلام خسته نباشید. من برای سایتم از margin و padding استفاده کردم که در فایرفاکس درست نمایش می دهد و در کروم همه چیز به هم می ریزد. ممکنه منو راهنمایی کنید؟
پاسخ: 
در طراحی قالب باید سعی کنید قدم به قدم کدنویسی را در مرورگرهای مختلف تست نمائید تا اگر مشکلی بود در همان مرحله برطرف گردد، پس از تکمیل کار سازگار کردن قالب با مرورگرهای مختلف پیچیده تر خواهد بود، به هر صورت برای راهنمایی بیشتر و در صورت تمایل لطفا آدرس سایت و صفحه مربوطه را جهت بررسی درج نمائید.
نویسنده: کوچ
زمان: ۱۷:۵۳:۳۰ - تاریخ: ۱۳۹۷/۰۸/۲۰
ممنون استفاده بردیم استاد . عالی بود مرسی
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




7 × 3
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷

form استادمجازی
در:
سلام. از ادمین عزیز و همگی دعوت می کنم آموزش های خوبتون را بصورت آموزش ویدیویی یا صوتی و... در سایت ostadmajazi.com استادمجازی ...
۲۲:۱۲:۲۳ ۱۳۹۸/۰۸/۱۳

form mohamad
در:
سلام و خسته نباشید ، توی فرمی که ساختم چند تا drop down دارم که میخوام با php براشون شرط بذارم به طوری...
۱۳:۵۱:۳۴ ۱۳۹۸/۰۸/۱۰

form رضا
در:
خسته نباشید این جلسه آخر html بود؟؟؟؟
۰۱:۱۵:۰۷ ۱۳۹۸/۰۸/۱۰

form امیرمحمد
در:
سلام و خسته نباشید استاد بنده میخوام بین دو کد زیر که مشخص کردم رو به دست بیارم
// ---------------------set سلام...
۱۹:۳۰:۵۳ ۱۳۹۸/۰۸/۰۸

form حجت
در:
خیلی ممنونم از لطف شما. اوکی شد.
۱۰:۲۸:۳۵ ۱۳۹۸/۰۸/۰۶

form میلاد
در:
آشنایی نسبی با css, php و ajax دارم و نمیخام از library های موجود در نت استفاده کنم. خواستم با همین متد که انصافا روان...
۲۳:۲۲:۵۵ ۱۳۹۸/۰۸/۰۵

form عرفان
در:
با سلام. مدتی بود که بدلایل مشکلات زیاد نتونستم به وبلاگم رسیدگی کنم ولی وقتی برگشتم میبینم که هزاران بازدید داشتم و همشونم به زبان...
۲۲:۴۹:۴۴ ۱۳۹۸/۰۸/۰۵

form raha
در:
سلام وقتتون بخیر ببخشید علامت @ در کل به چه معناست ممنون میشم پاسخ دهید
۲۰:۱۲:۵۹ ۱۳۹۸/۰۸/۰۵

form میلاد
در:
باسلام تشکر از مطالب روان و پرکاربردتان. در خصوص آموزش مذکور، نحوه و ترفند نمایش محور عمودی در سمت چپ نمودار (مشابه...
۰۲:۳۸:۴۰ ۱۳۹۸/۰۸/۰۵