سوال در مورد ابعاد عناصر در Html [بایگانی]

majidghafoorzade

سه شنبه 14 شهریور 1396, 09:53 صبح

سلام
بعضی اوقات که میخوام برای یک عنصر width و padding تعریف کنم.اگر width:100% و padding:10px باشه اون عنصر از صفحه میزنه بیرون چون در واقع مقدار padding در دو طرف به 100% عرض اضافه میشه.
ولی گاهی اوقات این padding درون عرض قرار میگیره و جز همون 100% میشه کسی میتونه این موضوع رو برای من توضیح بده؟

anvar

سه شنبه 14 شهریور 1396, 19:01 عصر

بهتره با خاصیت box-sizing در CSS آشنا بشید - این خاصیت به مروگر شما می گوید که عرض یک کنترل شامل چه چیزهایی می شود (عرض خود کنترل + بوردر آن + محتوی آن و ....)

در مثال شماره 1 مد نظر شما اگر به همین عنصر خاصیت box-sizing: border-box; رو اضافه کنید همون اتفاقی می افته که در مثال شماره 2 ذکر کردید - در واقع در مثال شماره 2 شما این Padding جزئی از محتوی این عنصر محسوب خواهد شد و نه چیزی بیشتر از 100 عرض آن

برای اطلاعات بیشتر به لینک زیر مراجعه نمائید
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

و بر روی دکمه سبز رنگ با متن Try it Yourself کلیک کنید تا دموی انلاین آنرا مشاهده نمائید - عرض ها رو خودتون به 100% تغییر بدید تا وضعیت رو ببینید

majidghafoorzade

چهارشنبه 15 شهریور 1396, 08:48 صبح

بهتره با خاصیت box-sizing در CSS آشنا بشید - این خاصیت به مروگر شما می گوید که عرض یک کنترل شامل چه چیزهایی می شود (عرض خود کنترل + بوردر آن + محتوی آن و ....)

در مثال شماره 1 مد نظر شما اگر به همین عنصر خاصیت box-sizing: border-box; رو اضافه کنید همون اتفاقی می افته که در مثال شماره 2 ذکر کردید - در واقع در مثال شماره 2 شما این Padding جزئی از محتوی این عنصر محسوب خواهد شد و نه چیزی بیشتر از 100 عرض آن

برای اطلاعات بیشتر به لینک زیر مراجعه نمائید
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

و بر روی دکمه سبز رنگ با متن Try it Yourself کلیک کنید تا دموی انلاین آنرا مشاهده نمائید - عرض ها رو خودتون به 100% تغییر بدید تا وضعیت رو ببینید

خیلی ممنون دوست عزیز
بسیار عالی بود:قلب: