شما اینجا هستید

ویژگی حاشیه درونی CSS فضای خالی بین حاشیه عنصر و محتوای عنصر را تنظیم میکند.

حاشیه درونی

حاشیه درونی، ناحیه خالی دور محتوای یک عنصر ( داخل حاشیه) است. حاشیه درونی برعکس حاشیه بیرونی رنگ پس زمینه عنصر را به خود میگیرد.

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

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

  • length : حاشیه داخلی را به صورت ثابت در واحدهای px, pt, em تعریف میکند
  • % : حاشیه داخلی را بر اساس اندازه عنصری که در آن قرار دارد در واحد درصد مشخص میکند

اطراف منحصر به فرد  در padding

در CSS امکان تعریف حاشیه درونی منحصر به فرد برای هر طرف از عنصر وجود دارد :

<html>

<head>

<style>

p {

    background-color: yellow;

}


p.padding {

    padding-top: 25px;

    padding-right: 50px;

    padding-bottom: 25px;

    padding-left: 50px;

}

</style>

</head>

<body>


<p>This is a paragraph with no specified padding.</p>

<p class="padding">This is a paragraph with specified paddings.</p>


</body>

</html>

 

توضیحات مثال :

 

  • padding-top : حاشیه درونی بالای عنصر را مشخص میکند
  • padding-bottom : حاشیه درونی پایین عنصر را مشخص میکند
  • padding-right : حاشیه درونی سمت راست عنصر را مشخص میکند
  • padding-left : حاشیه درونی سمت چپ عنصر را مشخص میکند

تندنویسی ویژگی padding

با خلاصه نویسی کردن ویژگی padding میتوانیم همه ویژگیهای padding را در یک ویژگی تعریف کنیم. ویژگی خلاصه نویسی برای همه ویژگیهای حاشیه داخلی، padding نام دارد.

ویژگی padding میتواند از یک تا چهار مقدار را به خود بپذیرد.

  • ;padding : 25px 50px 75px 100px
    • حاشیه داخلی بالای عنصر 25px میشود
    • حاشیه داخلی راست عنصر 50px میشود
    • حاشیه داخلی پایین عنصر 75px میشود
    • حاشیه داخلی چپ عنصر 100px میشود
  • ;padding: 25px 50px 75px
    • حاشیه داخلی بالای عنصر 25px میشود
    • حاشیه داخلی راست و چپ عنصر 50px میشود
    • حاشیه داخلی پایین عنصر 75px میشود
  • ;padding: 25px 50x
    • حاشیه داخلی بالا و پایین عنصر 25px میشود
    • حاشیه داخلی راست و چپ عنصر 50px میشود
  • ;padding: 25px
    • هر کدام از حاشیه های داخلی 25px  میشوند

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.