Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

خاصیت margin در css

خاصیت 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-top

margin-left
←─────→
Width
←──────────────────→
margin-right
←─────→
margin-bottom


مقدار ها در 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 هم فول
منتظرم
پاسخ : بله ممنون چه کسی هست که قبول نکنه.
با تشکر
سلام

سایت جالبی دارین
ولی من از شما یه کد چت روم کپی کردم ولی این کد روی بلاگفا کار نمی کنه

اما روی روز بلاگ درست کار می کنه

آخه بلاگفا نمی ذاره کدی که داخلش روز بلاگ نوشته شده در قالب استفاده کرد


اگه تونستی یه کاری برای حل این مشکل انجام بدید و بهم خبر بدید
پاسخ : کد چت روم فقط مال رزبلاگ هست روی بقیه سیستم ها جواب نمیده.
البته گذشته از این که همونطور بلاگفا از ما پشتیبانی نمی کنه ما هم از بلاگفا پشتیبانی نمی کنیم.
بهتره سیستم وبلاگدهیه بهتری رو انتخاب کنید.
با تشکر
سلام عالیه
اگه میشه آموزش تبدیل قالب پی اس دی رو به اچ تی ام ال رو بزار
لدفن


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36579
افراد آنلاین : 1
بازدید امروز : 178
بازدید دیروز : 755
گوگل امروز : 10
گوگل دیروز : 125
بازدید هفته : 2,517
بازدید ماه : 19,963
بازدید سال : 302,887
بازدید کلی : 10,697,363