این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با ویژگی Margins در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Margins در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی Margin در CSS
ویژگی Margin ویژگی است که با استفاده از آن میتوان یک فاصله ( یا فضای خالی ) رو در اطراف یک تگ ایجاد کرد، در واقع میتونیم بگیم این فضای خالی یک فضای بیرونی است.
- ویژگی Margin یک فضای خالی در قسمت بیرونی تگ ایجاد میکنه
- ویژگی Padding یک فضای خالی در قسمت داخلی تگ ایجاد میکنه
ویژگی Margin در CSS دارای ۴ جهت می باشد :
- Margin-Top : جهت بالا
- Margin-Right : جهت راست
- Margin-Bottom : جهت پایین
- Margin-Left : جهت چپ
Free-Learn
مثال از Margin در CSS
مثال شماره ۱ : ایجاد Margin در ۴ طرف تگ بصورت مجزا ( یعنی بالا – راست – پایین و چپ )
|
1 2 3 4 5 6 |
.mytext{ margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:50px; } |
مثال شماره ۲ : وسط قرار دادن یک تگ در صفحه با استفاده از Margin
|
1 2 3 4 5 6 7 |
.mytext{ margin-top:20px; margin-bottom:20px; margin-right:auto; margin-left:auto; width:300px; } |
مثال شماره ۳ : وسط قرار دادن عکس در صفحه با استفاده از Margin
|
1 2 3 4 5 |
.MyImage{ margin-right:auto; margin-left:auto; display:block; } |
Free-Learn
خلاصه نویسی Margin در CSS
شکل کلی خلاصه نویسی ویژگی Margin بصورت زیر می باشد :
|
1 |
margin: top right bottom left; |
مثال شماره ۱ : استفاده از ۴ مقدار مجزا برای ۴ جهت
- بالا ۸۰ پیکسل
- راست ۱۰ پیکسل
- پایین ۶۰ پیکسل
- چپ ۷۰ پیکسل
|
1 2 3 |
.mytext{ margin:80px 10px 60px 70px; } |
مثال شماره ۲ : فقط راست و چپ
- بالا نداره
- راست ۴۰ پیکسل
- پایین نداره
- چپ ۱۰۰ پیکسل
|
1 2 3 |
.mytext{ margin:0 40px 0 100px; } |
مثال شماره ۳ : فقط بالا و پایین
- بالا ۱۰۰ پیکسل
- راست نداره
- پایین ۱۰۰ پیکسل
- چپ نداره
|
1 2 3 |
.mytext{ margin:100px 0 100px 0; } |
مثال شماره ۴ : استفاده از ۱ مقدار برای ۴ طرف ( یعنی در مثال زیر ۱۰۰ پیکسل برای ۴ طرف اعمال میشه )
- بالا ۱۰۰ پیکسل
- راست ۱۰۰ پیکسل
- پایین ۱۰۰ پیکسل
- چپ ۱۰۰ پیکسل
|
1 2 3 |
.mytext{ margin:100px; } |
