آموزش کامل کار با حاشیه داخلی Padding در css

بازدید: 455 بازدید
آموزش کار با حاشیه داخلی padding

padding یکی دیگر از امکاناتی است که css در اختیار طراحان وب سایت قرار می دهد. با استفاده از padding در css شما می توانید فاصله محتوای داخل یک عنصر را از لبه های آن عنصر تعیین کنید. به عبارت دیگر padding به شما اجازه می دهد که حاشیه داخلی را تنظیم کنید. padding را می توان حالت برعکس margin که در پست قبلی آموزش داده شد در نظر گرفت. برای آموزش کامل کار با padding در css در ادامه این پست با ما همراه باشید.

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح 

در ادامه سری آموزش های css، امروز در خدمت شما هستیم با آموزش کار با padding در css.

در آموزش امروز شما با padding  و ویژگی های آن آشنا می شوید. در سری آموزش های css ، شما با نحوه کار با margin آشنا شدید. در این آموزش دیدید که margin  کنترل کاملی درباره حاشیه های خارجی یک عنصر در اختیار شما قرا می دهد. برخلاف margin، شما می توانید به کمک padding کنترل کاملی روی حاشیه های داخلی یک عنصر داشته باشید. این ویژگی به شما کمک می کند که بتوانید فاصله های داخلی محتوای یک عنصر را تنظیم کنید. با ما همراه باشید.

 

ویژگی های padding

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

محاسبه width
محاسبه width

 

نحوه محاسبه height

محاسبه height
محاسبه height

 

درباره محاسبات height و width بیشتر بخوانید.

مقداردهی padding

برای مقداردهی به padding دو روش وجود دارد. شما می توانید با مقداردهی درصدی و یا روش inherit آنرا مقداردهی کنید.

در روش مقداردهی درصدی، مرورگر مقدار را نسبت به عرض نگهدارنده تعیین می کند.

و در روش inherit، مقدار تعیین شده برای عنصر، با مقادیر موجود برای حاشیه های عنصر پدر، برابر خواهد بود.

یعنی اگر عنصر پدر ،padding  به اندازه 3px داشته باشد،padding عنصر فرزند نیز 3px خواهد بود.

 

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.