تنظیم فاصله محتوای یک عنصر در CSS

حالتی را در نظر بگیرید که یک div با حاشیه 1px ایجاد کرده اید و درون آن محتوا قرار داده اید، بصورت پیش فرض محتوای یک div فاصله بسیار کمی با حاشیه آن خواهد داشت که این امر موجب کاهش جذابیت آن می شود و در بسیاری از مواقع بهتر است محتوا فاصله مناسبی از کادر خود داشته باشد. توسط خاصیت padding می توان فاصله محتوای یک عنصر را نسبت به خود عنصر تعیین نمود.

نحوه استفاده

Padding نیز همانند margin به دو روش قابل اعمال می باشد. روش اول مقدار دهی فاصله به تفکیک جهت می باشد که به چهار حالت قابل استفاده است:

  • padding-top: فاصله محتوا از بالای کادر.
  • padding-right: فاصله محتوای از سمت چپ کادر.
  • padding-bottom: فاصله محتوا از پایین.
  • padding-left: فاصله محتوا از سمت چپ.
<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      div {
        width: 400px;
        height: auto;
        background-color: lightgray;
        margin: 10px auto;
        border: 1px solid black;
        padding-top: 10px;
        padding-right: 15px;
        padding-bottom: 10px;
        padding-left: 15px;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  </body>
</html>

روش دوم، مقدار دهی به وسیله خاصیت padding می باشد که این روش نیز به سه حالت قابل استفاده است:

  • تعیین یک مقدار: در این صورت، مقدار تعیین شده در هر چهار جهت اعمال می گردد.
  • تعیین دو مقدار: مقدار اول برای فاصله از بالا و پایین و مقدار دوم برای فاصله چپ و راست اعمال می گردد.
  • تعیین چهار مقدار: مقادیر تعیین شده به ترتیب از بالا به صورت ساعتگرد اعمال می شود.
<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      div {
        width: 400px;
        height: auto;
        background-color: lightgray;
        margin: 10px auto;
        border: 1px solid black;
        padding: 10px 15px;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
  </body>
</html>

نکته: مقدار تعیین شده برای padding روی اندازه شکل تأثیر گذار است. برای مثال اگر کادری با عرض 200px طراحی شده باشد و برای آن 10px از سمت چپ و راست padding مشخص کرده باشد، عرض نهایی کادر 220px خواهد بود.