خب تا اینجای کار در دوره آموزش CSS یاد گرفتیم حاشیه چی هست – حاشیه خارجی هم توی جلسه قبلی یاد گرفتیم . حالا میخوایم به حاشیه داخلی بپردازیم. همونطوری که در حاشیه خارجی میومد یه فاصله این بین حاشیه و المان های بیرونی اجرا میکرد و در اصل دور المان یه فضا باز میکرد حاشیه داخلی هم همین کار رو میکنه ولی در داخل المان و از مرز خود حاشیه اصلی حساب میکنه .
فارسی گفتن سخته ! ببینین ما یه border داریم که میاد حاشیه اصلی المان رو مشخص میکنه و هرچی فاصله از بیرون المان بخوایم بدیم میشه margin هرچی هم فاصله بخوایم از داخل المان بدیم میشه padding ! به همین سادگی .
<div style="width:100%;padding:70px;border-width:1px;border-style:solid;">
این المان حاشیه داخلی ۷۰ پیکسل داره !</div>
دقیقا مثل جلسه قبلی در آموزش CSS که میومدیم برای margin هر قسمت یا طرف المان رو مقداردهی میکردیم برای padding هم باید همین کار رو بکنیم . همون واحدها رو هم میتونیم اینجا تعریف کنیم که پیکسل و درصد و … هستن .
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
کدهای کوتاه شده padding
میتونیم بیایم برای ویژگی padding هم مثل بقیه چیزهایی که یاد گرفتیم تمام این کدها رو توی یک خط کدخلاصه کنیم . مثال زیر رو ببینین :
div {
padding: 25px 50px 75px 100px;
}
عرض المان و مشکلات padding
قبل از هرچی این رو باید بدونین که نمیتونین عدد منفی بزنین توی padding . ولی توی margin میتونستیم منفی بزنیم . خب حالا یه مشکلی وجود داره توی این قسمت ها . وقتی ما عرض المان رو با width مشخص میکنیم و میایم بهش padding میدیم این قابلیت padding میاد عرض المان ما رو تغییر مبده ! برای جلوگیری از این موضوع میایم یه ویژگی تعریف میکنیم به اسم box-sizing و مقدار اون رو border-box میذاریم و با این کار دیگه المان ما تغییر عرض نداره و ابعادش حفظ میشه ! این حرکت خیلی به کارتون میاد . حتما یادتون باشه .
