padding در CSS



در این جلسه می خواهیم با مفهوم padding آشنا شویم. و سپس بیایید نکاتی را در مورد آن بیاموزیم. ویژگی padding فضای خالی در داخل عنصر ایجاد می کند. در واقع padding فضای بین محتوا و مرز عنصر است. به عبارت ساده، اگر به عنصری بالشتک بدهیم، آن عنصر از داخل چاق می شود. ما می توانیم این ویژگی را به هر طرف عنصر اعمال کنیم. برای این کار از دستورات زیر استفاده می کنیم: Padding-top : px ; padding-right : px ; padding-bottom : px ; padding-left : px ; برخی از نکات مربوط به مباحث padding و margin و borders مشابه است. از جمله، ما می توانیم این ویژگی ها را در هر طرف عنصر اعمال کنیم و همچنین از دستورات خلاصه شده استفاده کنیم. پد: 20px 30px 40px 50px; این دستور 20 پیکسل از بالا، 30 پیکسل از سمت راست، 40 پیکسل از پایین و 50 پیکسل از سمت چپ ایجاد می کند. بالشتک: 20px 30px 40px; و این دستور از بالا 20 پیکسل از سمت راست و 30 پیکسل از سمت چپ و 40 پیکسل از پایین ایجاد می کند. و همچنین اگر فقط یک مقدار به آن بدهیم، از هر چهار طرف به همان میزان padding ایجاد می شود. توجه: بالشتک ها نمی توانند مقادیر منفی بگیرند و فقط مقادیر مثبت برای آنها مجاز است. نکته مهم، فرض کنید یک عنصر ایجاد کرده ایم و به آن عرض 300 پیکسل داده ایم: div{background-color: blue; width: 300px;} حالا از سمت راست و چپ به آن padding می دهیم: div{background-color: blue; عرض: 300 پیکسل؛ padding: 0px 500px;} در این صورت مشکلی پیش می آید. به دلیل padding، عرض عنصر ما از مقدار 300px فراتر رفته است. در صورتی که نباید این اتفاق بیفتد. بنابراین، برای حل این مشکل چه باید کرد؟ با استفاده از دستور box-sizing می توانیم این مشکل را به خوبی حل کنیم. به شرح زیر: div{background-color: blue;width:300px;padding-right:500px;box-sizing: border-box;}در این صورت عرض عنصر اشتباه نمی شود و در صورت نیاز، محتوا کوچکتر باشد تا عرض را حفظ کند.

دیدگاهتان را بنویسید