با سلام خدمت شما همراهان گرامی سایت پرنیان طرح
در ادامه سری آموزش های css، امروز در خدمت شما هستیم با آموزش کار با padding در css.
در آموزش امروز شما با padding و ویژگی های آن آشنا می شوید. در سری آموزش های css ، شما با نحوه کار با margin آشنا شدید. در این آموزش دیدید که margin کنترل کاملی درباره حاشیه های خارجی یک عنصر در اختیار شما قرا می دهد. برخلاف margin، شما می توانید به کمک padding کنترل کاملی روی حاشیه های داخلی یک عنصر داشته باشید. این ویژگی به شما کمک می کند که بتوانید فاصله های داخلی محتوای یک عنصر را تنظیم کنید. با ما همراه باشید.
ویژگی های padding
Padding فاصله داخلی محتوای داخل عنصر از لبه های آن را تعیین می کند.
نکته: شکل زیر شما را در درک padding کمک می کند:
padding نیز مانند margin به شما امکان کنترل داشتن روی هر چهار جهت فضای اطراف یک محتوا را می دهد.که با مقادیر top,button,right,left مشخص می شوند.
نحوه کدنویسی برای padding نیز درست به همان شیوه و مدل margin خواهد بود. برای مطالعه درباره margin اینجا کلیک کنید.
نکته: رنگ پس زمینه حاشیه داخلی padding تابع رنگ پس زمینه محتوا content background خواهد بود.
مثال
درست مانند کدنویسی برای خاصیت margin، در padding نیز می توانید برای هرجزء به طور جداگانه مقدار تعیین کنید. همچنین می توانید از مختصر نوبسی استفاده کنید و از یک ، دو ، یا سه مقدار برای مقداردهی استفاده کنید.
[php]
div {
padding: 25px;
}
[/php]
در مثال بالا از مختصر نویسی استفاده شده است. با این روش تعیین می کنید که برای هر چهار طرف از عنصر div به اندازه 25px فاصله داخلی وجود داشته باشد.
مفهوم box و box-sizing در css
برای یادگرفتن کامل padding و border و margin، یادگیری مفهوم box و box-sizing مهم است.
تصویری که در بالا می بینید، نشانگر یک box در css می باشد. box محیط اطراف یک عنصر html را مشخص می کند.
شامل تنظیمات padding و border و margin می باشد.
درباره box بیشتر بخوانید.
محاسبه اندازه یک box
برای اینکه بتوانید عناصر یک صفحه را به درستی صفحه قراردهید،محاسبه اندازه box مهم است.
در صفحات وب سایت، اجزا با دقت جزء به جزء و 1px محاسبه می شوند. پس محاسبه width(طول افقی) و height(طول عمودی) در box مهم است. این موارد اندازه اجزاء box را تعیین می کنند.
توجه داشته باشید
در صورت وجود ( Border , Margin , Padding )اندازهBox،با اندازه تعیین شده متفاوت خواهد بود .
در واقع با استفاده از width و height تنها اندازه محتوا ( Content ) تعیین شده است. برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند .
این نکته مهم را به یاد داشته باشید که ، Padding و Border در اندازه Width و Height یک box تاثیر گزار هستند .
نحوه محاسبه width
نحوه محاسبه height
درباره محاسبات height و width بیشتر بخوانید.
مقداردهی padding
برای مقداردهی به padding دو روش وجود دارد. شما می توانید با مقداردهی درصدی و یا روش inherit آنرا مقداردهی کنید.
در روش مقداردهی درصدی، مرورگر مقدار را نسبت به عرض نگهدارنده تعیین می کند.
و در روش inherit، مقدار تعیین شده برای عنصر، با مقادیر موجود برای حاشیه های عنصر پدر، برابر خواهد بود.
یعنی اگر عنصر پدر ،padding به اندازه 3px داشته باشد،padding عنصر فرزند نیز 3px خواهد بود.