جلسه سیزدهم آموزش CSS : آموزش padding - حاشیه داخلی

با سلام خدمت دوستان عزیز. در خدمت شما هستیم با سیزدهمین جلسه . در این جلسه قصد داریم شما را با padding و کاربرد آن در طراحی صفحات وب آشنا کنیم.

ویژگی padding ، فاصله بین محتوای یک تگ و خطوط حاشیه آن را مشخص می کند. شما برای تنظیم padding در css ، پنج ویژگی زیر را در اختیار دارید:

padding-bottom
padding-top
padding-left
padding-right
padding

در ادامه هر یک از این ویژگی ها را همراه با مثالی برای آن ها، تشریح می کنیم.

همانطور که در بالا هم ذکر شد ، padding ، فاصله بین محتوای یک تگ و خطوط حاشیه آن را مشخص می کند. اما به صورت کلی ، شما یا باید padding های چهار طرف یک تگ را ، در یک دستور css مشخص کنید یا اینکه برای هر طرف تگ به صورت جداگانه ، مقدار padding را مشخص کنید.

1. تعیین padding طرفین به صورت جداگانه

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

مثال 1 :

<html>
   <head>
   </head>
   
   <body>
      <p style="padding-bottom: 15px; border:1px solid black;">
      This is a paragraph with a specified bottom padding
      </p>
      
      <p style="padding-bottom: 5%; border:1px solid black;">
      This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
   
</html>

نتیجه:

مثال 2 :

<html>
   <head>
   </head>
   
   <body>
      <p style="padding-top: 15px; border:1px solid black;">
      This is a paragraph with a specified top padding
      </p>
      
      <p style="padding-top: 5%; border:1px solid black;">
      This is another paragraph with a specified top padding in percent
      </p>
   </body>
   
</html>

نتیجه:

مثال 3 :

<html>
   <head>
   </head>
   
   <body>
      <p style="padding-left: 15px; border:1px solid black;">
      This is a paragraph with a specified left padding
      </p>
      
      <p style="padding-left: 15%; border:1px solid black;">
      This is another paragraph with a specified left padding in percent
      </p>
   </body>
   
</html>

نتیجه:

مثال 4 :

<html>
   <head>
   </head>
   
   <body>
      <p style="padding-right: 15px; border:1px solid black;">
      This is a paragraph with a specified right padding
      </p>
      
      <p style="padding-right: 5%; border:1px solid black;">
      This is another paragraph with a specified right padding in percent
      </p>
   </body>
   
</html>

نتیجه:

2. تعیین padding چهار طرف به صورت یکجا

چنانچه بخواهید padding های چپ ، راست ، بالا و پایین را به صورت یکجا تعیین کنید ، باید از ویژگی padding استفاده کنید. برای مقدار دهی به این ویژگی می توانید به چهار طریق عمل کنید که در مثال زیر به شما نشان داده شده اند.

<html>
   <head>
   </head>
   
   <body>
      <p style="padding: 15px; border:1px solid black;">
      all four padding will be 15px 
      </p> 
      
      <p style="padding:10px 2%; border:1px solid black;"> 
      top and bottom padding will be 10px, left and right
      padding will be 2% of the total width of the document. 
      </p> 
      
      <p style="padding: 10px 2% 10px; border:1px solid black;">
      top padding will be 10px, left and right padding will 
      be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style="padding: 10px 2% 10px 10px; border:1px solid black;">
      top padding will be 10px, right padding will be 2% of
      the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
   
</html>

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

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

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

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

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

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

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

…

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

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

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

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

سایر

جلسه سیزدهم آموزش CSS : آموزش padding - حاشیه داخلی

1. تعیین padding طرفین به صورت جداگانه

2. تعیین padding چهار طرف به صورت یکجا

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