خاصیت margin در زبان برنامه نویسی CSS به شما کمک خواهد کرد که به مقدار خاصی فاصله اطراف یک بلاک ایجاد کنید.
برای مثال وقتی شما می خواهید یک تگ div با تگ div بالای خود کمی فاصله داشته باشد می توانید از margin استفاده کنید.
margin می تواند به شما امکان دهد که یک باکس را به وسط یا به جایی که با کدنویسی کمی سخت می توان به آن نقطه رسید ببرید.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>test Margin</title>
<style>
div{
margin:10px auto;
background:#eee;
width:100px;
padding:5px;
border:1px #ccc solid;
text-align:center;
}
</style>
</head>
<body>
<div>Margin</div>
</body>
</html>
نمایش دمو
مکان اضافه شدن margin
margin از چهار قسمت بالا ، پایین ، چپ و راست تشکیل شده است که شما می توانید در زیر مکان این چهار مورد را ببینید. توجه کنید که قسمت سفید یک باکس با اندازه خاص به حساب آمده که margin های آن با رنگ خاکستری نمایش داده شده است.
|
||||
|
margin-left ←─────→ |
Width ←──────────────────→ |
margin-right ←─────→ |
||
|
||||
مقدار ها در margin
در margin کلی شما می توانید چهار خاصیت margin-top , margin-right , margin-bottom , margin-left را جا دهید و همگی آنها را با هم استفاده کنید. برای استفاده از آن می بایست ترتیب قرار گیری آن را یاد بگیرید:
margin: margin-top margin-right margin-bottom margin-left ;
هر کدام از مقدار ها:
این مقدار ها هر کدام می تواند یکی از این گزینه ها باشد:
- عدد + واحد : برای مثال 15px یا 10% یا 5em و ...
- inherit : هیچ (بدون margin)
- auto : مرورگر خودکار برای شما انتخاب خواهد کرد.
خلاصه نویسی:
شما در استفاده از margin کلی می توانید خلاصه بنویسید. به این صورت که دو قسمت را حذف می کنید و قسمت بالا و پایین را با یک عدد و قسمت چپ و راست را با یک عدد دیگر نشان دهید. ترتیب اینگونه می باشد:
margin: margin-top&bottom margin-left&right ;
شما می توانید با گذاشتن فقط یک گزینه در margin کلی تمام margin ها را به همان اندازه در آورید. برای مثال اگر margin:15px باشد تمام چهار margin به اندازه 15 پیکسل از همه طرف فاضله خواهند داشت. به این صورت:
margin: margin-top&bottom&left&right ;
استفاده از مقدار auto
این خاصیت ممکن است در ورژن های قدیمی بعضی مرورگر ها عمل نکند. شما با استفاده از این خاصیت می توانید بدون استفاده از text-align یا align و ... یک باکس را به وسط ببرید یا کار های دیگری انجام دهید.
برای مثال شما با استفاده از این کد می توانید یک باکس را به وسط ببرید:
margin: 0 auto ;
همانطور که میبینید margin های بالا و پایین 0 می باشند (عدد 0 نیازی به واحد ندارد) و margin های چپ و راست auto می باشد. به همین خاطر مرورگر خودکار اندازه ای را برای سمت چپ و راست انتخاب خواهد کرد که باکس در وسط قرار بگیرد.
به این مثال نیز توجه کنید:
margin: 0 15px 0 auto ;
در این مثال باکس شما در 15 پیکسلی سمت راست صفحه قرار می گیرد. البته می توان این مثال ها را با روش های دیگری هم بوجود آورد ولی برای مثال اگر از تگ center بخواهید استفاده کنید ، در HTML5 این تگ و خاصیت های align استاندارد به حساب نمی آیند و تلاش شده تا کدنویسان را به سمت استفاده از css سوق دهند.
من css و html فول بلدم
طراحی و ترجمه قالب هم بلدم
تبدیل پی اس دی به html هم فول
منتظرم
با تشکر
سایت جالبی دارین
ولی من از شما یه کد چت روم کپی کردم ولی این کد روی بلاگفا کار نمی کنه
اما روی روز بلاگ درست کار می کنه
آخه بلاگفا نمی ذاره کدی که داخلش روز بلاگ نوشته شده در قالب استفاده کرد
اگه تونستی یه کاری برای حل این مشکل انجام بدید و بهم خبر بدید
البته گذشته از این که همونطور بلاگفا از ما پشتیبانی نمی کنه ما هم از بلاگفا پشتیبانی نمی کنیم.
بهتره سیستم وبلاگدهیه بهتری رو انتخاب کنید.
با تشکر
اگه میشه آموزش تبدیل قالب پی اس دی رو به اچ تی ام ال رو بزار
لدفن