جلسه دوازدهم آموزش css : آموزش margin در CSS - کلیک سایت

سلام دوستان عزیز. با سیزدهمین جلسه از دوره رایگان آموزش css در خدمت شما هستیم. در این جلسه شما را با یکی دیگر از ویژگی های ccs به نام margin آشنا می کنیم.
margin فاصله یک تگ را از طرفینش مشخص می کند. همچنین در صورتی که تمایل داشته باشید برخی تگ ها بر روی یک دیگر بیافتند یا به اصطلاح overlap داشته باشند می توانیم برای margin از مقادیر منفی نیز استفاده کنیم.
در هنگام استفاده از مارجین به نکات زیر توجه کنید:

تگ های فرزند نمی توانند ویژگی margin را به ارث ببرند.
مقادیر margin در راستای عمودی با یکدیگر ادغام می شوند و نه جمع. یعنی اگر برای تگ بالایی، مقدار margin-bottom را 20 پیکسل در نظر بگیریم و برای تگ پایینی مقدار margin-top را 40 پیکسل در نظر بگیریم، مقدار کل مارجین بین این دو تگ 40 پیکسل خواهد بود.

مقادیر مارجین برای چهار طرف تگ را ، هم می توان در یک دستور مشخص کرد و هم در چند دستور جداگانه. در مجموع برای تنظیم مارجین اطراف تگ html می توانیم از ویژگی های زیر استفاده کنیم:

margin
margin-bottom
margin-top
margin-left
margin-right

1. تنظیم ویژگی margin

برای تنظیم ویژگی مارجین چهار سمت تگ های html ، در یک دستور css ، می توانیم از ویژگی margin استفاده کنیم. نحوه مقدار دهی به این ویژگی به چهار صورت خواهد بود که با استفاده از مثال به شما نشان خواهیم داد.

<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>

حالا به نتیجه کدهای بالا توجه کنید:

2. تنظیم margin برای هر طرف به صورت جداگانه

چنانچه شما به هر دلیلی بخواهید برای هر یک از چهار طرف تگی به صورت جداگانه ویژگی مارجین تعریف کنید به جای استفاده از ویژگی مارجین از ویژگی های margin-bottom ، margin-top ، margin-left و margin-right استفاده می کنید. در ادامه برای هر یک از این موارد مثالی می آوریم.
مثال اول)

<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>

نتیجه:

مثال دوم:

<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>

نتیجه:

مثال سوم:

<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>

نتیجه:

مثال چهارم:

<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>

نتیجه:

خب دوستان، این جلسه هم به پایان رسید. موفق و پیروز باشید.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه دوازدهم آموزش css : آموزش margin در CSS - کلیک سایت

1. تنظیم ویژگی margin

2. تنظیم margin برای هر طرف به صورت جداگانه

آیا نیاز به مدرک هم دارید؟