مقاله: آموزش طراحی استایل ویبولتین (بخش دوم)

اموزش سوم که والا دیروز گذاشتیم کسی ندید
آموزش طراحی استایل ویبولتین (بخش سوم)

داداش من اخر نفهمیبدم این padding یعنی چی؟ چیکار می کنه؟ فرقش با مارجین چیه؟
می شه کامل توضیح بدید؟
ممنون اموزش ها عالی هستند

پدینگ فاصله از داخل هست
مثلا شما یه کادر داری میخوای داخلش یه کادر دیگه بندازی که اون کادر داخلی 10 پیکسل از هر طرف فاصله داشته باشه
خوب برای اینکه شما فاصله بدید باید روی کادر داخلی margin:10px اضافه کنی
اما زمانی که این کار رو میکنی میبینی که روی کادر اصلی تاثیر گذاشته شده
چون مارجین تمام عناصر وابسته رو با خودش تکون میده
خب برای این کار باید به کادر اصلی overflow: hidden اضافه بشه
اما که خوب یه سری مشکلات یبه وجود میاد
پس اینجاس که padding وارد میشه
خب همونطور که شما میخواستی کادر رداخلی ده پیکسل از طرفین فاصله داشته باشه این کار رو میتونی با padding انجام بدی
با این تفاوت که نباید پدینگ رو به کادر داخلی اضافه کرد
بلکه باید به کادر اصلی اضافه کرد
اینطوری تمام ععناصری که در کادر اصلی میاد ده پیکسل از طرفین فاصله میگیره
در واقع مارجین فاصله نسبت به عناصر خارجیه
و پدینگ فاصله از عناصر داخلی
البته پدینگ روی عرض و ارتفاع تاثیر میذاره مثلا کادر اصلی شما 100 پیکسل عرض و 100 پیکسل ارتفا داره
زمانی که پدینگ 10 پیکسل اضافه بشه به هر طرف 10 پیکسل اضافه میشه
یعنی طول و عرض بیست پیکسل افزاریش پیدا میکنه
که خوب به سادگی میشه عرض رو کمتر کرد تا با پدینگ هم عرض همون بمونه
امیدوارم خوب توضیح داده باشم

آقا ببخشید من مشکلی دارم من کلاس hover رو اضافه میکنم
ولی هیچ تغییری نمیکنه
لطفا کمکم کنید

Hover رو که بهش دادید به طور مثال :

کد:

.vbran:hover {

به کلاس اصلی تون یعنی vbiran کد زیر رو بدید:

کد:

-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;