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

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

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

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

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

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


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