آموزش margin در CSS
آموزش margin در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش margin در CSS خواهیم پرداخت.
ویژگی margin (مارجین) فضای اطراف یک عنصر HTML را تعریف می کند. برای همپوشانی مطالب می توان از مقادیر منفی استفاده کرد.
مقادیر ویژگی مارجین توسط عناصر کودک به ارث نمی رسد. به یاد داشته باشید که margin های عمودی مجاور (margin های بالا و پایین) به یکدیگر می ریزند به طوری که فاصله بین بلوک ها جمع حاشیه ها نیست ، بلکه فقط بیشتر از دو margin یا همان اندازه یک margin است که هر دو باشند برابر.
ما ویژگی های زیر را برای تنظیم margin عنصر داریم.
margin برای تنظیم خصوصیات حاشیه در یک اعلان مشخص می کند.
margin-bottom مارجین پایین یک عنصر را مشخص می کند.
margin-top مارجین بالای یک عنصر را مشخص می کند.
margin-left مارجین سمت چپ یک عنصر را مشخص می کند.
margin-right مارجین سمت راست یک عنصر را مشخص می کند.
اکنون، نحوه استفاده از این ویژگی ها را با مثال خواهیم دید.
ویژگی margin
ویژگی margin به شما امکان می دهد همه ویژگی های چهار margin را در یک اظهارنامه تنظیم کنید. در اینجا نحوه تنظیم margin در اطراف یک پاراگراف وجود دارد –
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> </head> <body> <p style = "margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style = "margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> <p style = "margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p> <p style = "margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p> </body> </html> |
خروچی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 |
all four margins will be 15px top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser |
ویژگی margin-bottom
ویژگی margin-bottom به شما امکان می دهد مارجین پایین یک عنصر را تنظیم کنید. می تواند از نظر طول ،٪ یا خودکار مقداری داشته باشد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <p style = "margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style = "margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> </body> </html> |
خروچی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified bottom margin This is another paragraph with a specified bottom margin in percent |
ویژگی margin-top
ویژگی margin-top به شما امکان می دهد مارجین بالای عنصر را تنظیم کنید. می تواند از نظر طول ،٪ یا خودکار مقداری داشته باشد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <p style = "margin-top: 15px; border:1px solid black;"> This is a paragraph with a specified top margin </p> <p style = "margin-top: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html> |
خروچی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified top margin This is another paragraph with a specified top margin in percent |
ویژگی margin-left
ویژگی margin-left به شما امکان می دهد مارجین سمت چپ یک عنصر را تنظیم کنید. می تواند از نظر طول ،٪ یا خودکار مقداری داشته باشد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <p style = "margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin </p> <p style = "margin-left: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html> |
خروچی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified left margin This is another paragraph with a specified top margin in percent |
ویژگی margin-right
ویژگی margin-right به شما امکان می دهد مارجین سمت راست یک عنصر را تنظیم کنید. می تواند از نظر طول ،٪ یا خودکار مقداری داشته باشد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> </head> <body> <p style = "margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin </p> <p style = "margin-right: 5%; border:1px solid black;"> This is another paragraph with a specified right margin in percent </p> </body> </html> |
خروچی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified right margin This is another paragraph with a specified right margin in percent |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما