حذف حاشیه بلاک با استفاده از css
برای حذف حاشیه بین بلاک div و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:
<!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>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.block{
width:auto;
height:200px;
background-color:#CC3;
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
با استفاده از ویژگی های margin و padding و مقادیر صفر برای تگ body، فاصله حاشیه های صفحه، تنظیم می شود.
</body>
</html>
پیش نمایش
توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.
نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css
تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:
<!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>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.block{
width:300px;
height:200px;
background-color:#CC3;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
برای تنظیم یک بلاک در وسط صفحه از margin-left و margin-right با مقادیر auto برای آن بلاک استفاده می کنیم.
</body>
</html>
پیش نمایش
توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.