تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css

[saberi]

تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css

اگر یک طراح وب تقریبا حرفه ای یا لااقل علاقمند به طراحی قالب شخصی برای وبلاگ یا سایت خود باشید، حتما با کدهای css آشنا هستید و بارها از آن در شکل دهی فرم و ظاهر صفحات  استفاده کرده اید؛ اگرچه نمای کلی کار با css چندان پیچیده نیست ولی جزئیات و ریزه کاری ها همیشه باعث می شوند که نکاتی هرچند ساده، به نظر مبهم و حل نشده باقی بمانند، به همین خاطر در این مطلب یکی از شایع ترین این موارد را با هم مرور خواهیم کرد و آن تنظیم فاصله بلاک ها و لایه های div از حاشیه صفحه و همچنین قرار دادن آن در وسط (center) به کمک css است.

خاصیت هایی که برای وسط (center) قرار دادن، ایجاد یا حذف فاصله (حاشیه) به آنها نیاز داریم margin و padding هستند.

حذف حاشیه بلاک با استفاده از css

برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css

تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.