آموزش برنامه نویسی و مهارتهای وب
شنبه ۱۱ آذر ۱۴۰۲
Saturday, December 2, 2023 GMT +3:30
Saturday, December 2, 2023 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>روش های تعریف مقدار برای ویژگی 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%;
}مختصر نویسی ویژگی margin
ویژگی margin را می توانیم به صورت مختصر و خطی نیز بنویسیم، در حالت مختصر نویسی به جای تعریف کلی یا تعریف ویژگی های زیرمجموعه در جهت های بالا، راست، پائین و چپ، با نوشتن مقادیر margin در یک خط به همان هدف اما با میزان کدنویسی کمتر دست پیدا می کنیم، به طور مثال:
.main-block {
margin: 2px 3px 1px 5px;
}<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;
}.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
از ویژگی padding در CSS جهت تعیین میزان حاشیه ی درونی عناصر صفحه استفاده می کنیم، به عبارتی padding فاصله محتوای یک بلاک از لبه های داخلی آن را مشخص می کند، به فرض اگر بخواهیم مطالب درونی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد کافیست برای استایل یا کلاس مربوط به آن لایه یک مقدار padding در نظر بگیریم، به طور مثال:
<style>
.main-block {
padding: 4px;
}
</style>
.
.
<body>
<div class="main-block">محتوای بلاک</div>
</body>.main-block {
padding-top: 4px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 8px;
}.main-block {
padding: 4px 10px 6px 8px;
}نکته: در حالت پیش فرض میزان حاشیه داخلی (padding) به ارتفاع (height) و عرض (width) موجود بلاک اضافه می شود، برای تغییر این حالت و عدم احتساب padding به ارتفاع و عرض می توانیم از خاصیت box-sizing با مقادیر border-box استفاده کنیم:
.main-block {
height: 50px;
width: 200px;
padding: 4px 10px 6px 8px;
box-sizing: border-box;
}مثال و پیش نمایش آنلاین
جهت آشنایی بیشتر با ویژگی های 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
مطالب بیشتر:کاربرد ویژگی position و float در CSS
کاربرد خاصیت display در CSS
نحوه تنظیم استایل لینک (Link) در CSS
کاربرد خاصیت height و width در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
دیدگاه
۳۴ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.حبیب
۲۱:۳۲ ۱۳۹۵/۱۰/۱۶
سلام توی خلاصه نویسی اشتباه نوشتید:
بالا و پایین 10
چپ و راست 15
ولی شما گفتید فقط به بالا و راست هستند لطفا اصلاح کنید
margin:10px 15pxبالا و پایین 10
چپ و راست 15
ولی شما گفتید فقط به بالا و راست هستند لطفا اصلاح کنید
بسیار ممنون از تذکر شما، اصلاح شد.
ابراهیمی
۱۰:۰۲ ۱۳۹۶/۰۸/۱۰
سلام خسته نباشید. من برای سایتم از margin و padding استفاده کردم که در فایرفاکس درست نمایش می دهد و در کروم همه چیز به هم می ریزد. ممکنه منو راهنمایی کنید؟
در طراحی قالب باید سعی کنید قدم به قدم کدنویسی را در مرورگرهای مختلف تست نمائید تا اگر مشکلی بود در همان مرحله برطرف گردد، پس از تکمیل کار سازگار کردن قالب با مرورگرهای مختلف پیچیده تر خواهد بود، به هر صورت برای راهنمایی بیشتر و در صورت تمایل لطفا آدرس سایت و صفحه مربوطه را جهت بررسی درج نمائید.
۱۷:۵۳ ۱۳۹۷/۰۸/۲۰
ممنون استفاده بردیم استاد . عالی بود مرسی
Zeinab
۱۲:۰۳ ۱۴۰۱/۰۷/۲۱
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin رو صفر قرار میدن و بعد به هر المان padding و margin مخصوص خودش رو میدن؟ اگه میشه توضیح بدین که این کار برای چیه؟
مرورگرها معمولا به صورت پیش فرض مقدار padding و margin را در حد ۴ پیکسل اعمال می کنند که برای حذف و صفر شدن این مقدار پیش فرض از سلکتور سراسری * در CSS استفاده می شود، یک دلیل دیگر برای جلوگیری از عدم تداخل استایل های مختلف در صفحاتی است که از برنامه های سوم شخص (third party) در آنها استفاده می شود.
صفحه 3 از 3آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.بهاره هوشمندی
سلام استاد خسته نباشید ببخشید باز مزاحم شدم اگه من بخوام از تگ strip_tags استفاده کنم و استثنا قائل بشم استایل های اون...۱۴۰۲/۰۹/۱۰
معراج
سلام من در قدیم سیستم مدیریت محتوا استفاده میکردن که وقتی متغیر بدون محتوا ایجاد میکردی ارور نمیداد و نیازی هم به @ قبلش...۱۴۰۲/۰۹/۰۸
ابوالفضل
سلام استاد وقتتون بخیر مثل همیشه من با یک مشکل بزرگ مواجه شدم و مجدد مزاحمتون میشم من به یک regex نیاز دارم تا...۱۴۰۲/۰۹/۰۶
بهاره هوشمندی
استاد ببخشید وقتی یه متن طولانی رو باهاش چک می کنم اگه تگ span و b داشته باشه چون تگ رو نمی بنده تا...۱۴۰۲/۰۹/۰۲
بهاره هوشمندی
با سلام استاد بزرگوار از لطف و محبت شما بسیار ممنون و سپاسگزارم خیلی عالی بود اینطوری خیلی خوب شد دستتون درد نکنه...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و از شما من این کد رو امتحان کردم واسه متن عادی خوبه و جواب میده ولی واسه متن طولانی که رنگ...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و خسته نباشید استاد بزرگوار آیا راهی وجود داره تفاوت دو تا متن رو با php پیدا کرد؟ مثلا با...۱۴۰۲/۰۸/۳۰
مهراد
سلام در جدول موقعی که عکس رو با php فراخوانی میکنم نمیاره تصویر عکس. لطفا راهنمایی کنید. ۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با سلام و درود استاد بزرگوار یه مشکل برام پیش اومده توی مطالب ارسالی سایت محتوایی به این صورت به متن ها اضافه شده...۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با تشکر از شما استاد گرامی پس کد رو باید اینطوری وارد کنم؟ اینطوری واسه من کار می کنه سپاسگزارم از شما...۱۴۰۲/۰۸/۰۹
بهاره هوشمندی
با سلام از لطف و محبت شما بسیار ممنون و سپاسگزارم دست شما درد نکنه لینکهای شما رو بررسی کردم یعنی باید کل کدهایی...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام و تشکر از شما من توی یه صفحه خالی هم امتحان کردم و یه amar.html هم توی پوشه root هاست ساختم بازم...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام با تشکر از شما من کاری که گفتید رو انجام دادم ولی بازم صفحه لاگین رو که میزنم باز آمارگیر اونو...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
سلام خسته نباشید من یه کد واسه آمارگیر دارم که جاو هست از سایت وبگذر بعد توی همه صفحه ها فعاله چطوری می تونم...۱۴۰۲/۰۸/۰۷
hossein
سلام وقت شما بخیر کدی هست که بشود با کمک اون، به محض حذف محصول توسط فروشندگان (افزونه دکان)، تصاویر محصول نیز حذف شوند...۱۴۰۲/۰۷/۲۵
hossein
سلام وقت شما بخیر ممنون میشم اگه راهنماییم کنید میخوام کدی در اختیارم بزارید که بتونه برام سقف درصد مدیر را تعیین کنه توی...۱۴۰۲/۰۷/۱۴
در انتظار بررسی: ۱
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.