بررسی اجمالی CSS Padding

پوسته CSS یکی از خواص مدل جعبه CSS است . این خصوصیت سمبلیک، حاشیه را در اطراف چهار طرف یک عنصر HTML قرار می دهد. پلاگین CSS را می توان به تقریبا هر تگ HTML (به جز برخی از تگ های جدول) استفاده می شود. علاوه بر این، تمام چهار طرف عنصر می توانند مقدار دیگری داشته باشند.

CSS اموال Padding

برای استفاده از خصوصیت padding کوتاه CSS، می توانید از "TRouBLe" (یا "TRiBbLe" برای شما طرفداران Star Trek) استفاده کنید. این برای بالا ، راست ، پایین ، و چپ است ، و این به ترتیب عرض عرضی که در مالکیت مختصر تنظیم شده است، اشاره دارد. مثلا:

padding: بالا سمت راست پایین چپ؛ padding: 1px 2px 3px 6px؛

اگر از مقادیر ذکر شده در بالا استفاده می کنید، ارزش افزونه های مختلف را به هر طرف از هر عنصر HTML که شما آن را اعمال می کنید اعمال می کند. اگر میخواهید همان پدیا را به چهار طرف اعمال کنید، می توانید CSS خود را ساده کنید و فقط یک مقدار را بنویسید:

padding: 12px؛

با استفاده از این خط CSS، 12 پیکسل از پد برای تمام 4 طرف عنصر اعمال می شود.

اگر میخواهید یک بالشتک برای بالا و پایین و چپ و راست یکسان باشد، میتوانید دو مقدار را بنویسید:

padding: 24px 48px؛

اولین مقدار (24px) برای بالا و پایین اعمال می شود، در حالی که دوم برای سمت چپ و راست اعمال می شود.

اگر شما سه مقدار را بنویسید، این باعث می شود که سطوح افقی (چپ و راست) یکسان باشد، در حالیکه بالا و پایین را تغییر دهید:

padding: بالا سمت راست و چپ پایین؛ padding: 0px 1px 3px؛

با توجه به مدل جعبه CSS، محفظه نزدیک به عنصر / محتوا است. این به این معنی است که محفظه به یک عنصر بین عرض یا ارتفاع محتوا و مقادیر مرزی که استفاده می کنید افزوده می شود. اگر پدینگ به صفر تنظیم شده باشد، آن را همان لبه به عنوان محتوای.

CSS نکات ارزشمند

Padding CSS می تواند هر مقدار غیر منفی طول را بگیرد. حتما اندازه گیری را مانند پیکسل یا علامت مشخص کنید. شما همچنین می توانید یک درصد برای padding خود را تعیین کنید که درصد پهنای بلوک حاوی عنصر خواهد بود. این شامل برای بالشتک بالا و پایین است. مثلا:

#container {width: 800px؛ ارتفاع: 200 پیکسل؛ } #container p {width: 400px؛ ارتفاع: 75٪؛ padding: 25٪ 0؛ }

ارتفاع پاراگراف در عنصر #container 75٪ از ارتفاع #container به همراه 25٪ از عرض برای بالشتک بالا و 25٪ از عرض برای کف پایه خواهد بود. این رقم بالغ بر 300 + 200 + 200 = 700 پیکسل است.

اثرات افزودن CSS Padding

در عناصر سطح بلوک ، بالشتک در چهار طرف استفاده می شود. از آنجا که عنصر در حال حاضر یک بلوک یا جعبه است، پدینگ به طرف جعبه اعمال می شود.

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

همچنین، در CSS2.1، شما نمی توانید بلوک های ظروف ایجاد کنید که عرض آن بستگی به یک عنصر با درصد عرض (یا عرض پد) دارد. اگر نتيجه را تعيين کنيد، تعريف نشده است. مرورگرها همچنان محتویات را نمایش می دهند، اما شما ممکن است نتایجی را که انتظار دارید را دریافت نکنید. اگر شما در مورد آن فکر می کنید، آن را حس می کند، به طوری که عنصر محفظه شما باید عرض عناصر کودک خود را به منظور تعریف عرض آن، مانند زمانی که آن یک عرض از پیش تعیین شده ندارد، و یک یا چند عرض تعیین شده به عنوان یک درصد از عنصر ظرف، این یک زنجیره دایره ای با هیچ پاسخ را تنظیم می کند. اگر از درصد برای عرض هر چیزی در سند خود استفاده کنید، باید اطمینان حاصل کنید که عرض عنصر والد نیز تعریف شده است.