حالا بیاییم ببینیم چطور ممکنه با مدل جعبه‌ای (Box Model) پیش‌فرض به مشکل بخوریم
و همین‌طور چطور می‌تونیم اون رو برطرف کنیم
پس کاری که الان می‌خوایم انجام بدیم اینه که بالاخره فاصله‌گذاری
این نوار کناری (sidebar) رو یکم درست کنیم
خب در حال حاضر هیچ padding وجود نداره همونطور که می‌بینید
و این فقط یک margin هست نه یک padding
پس این واقعاً درست نیست
پس بیایم اصلاحش کنیم و بعد با یک مشکل روبه‌رو می‌شیم
و بعد اون مشکل رو حل می‌کنیم
باشه؟
پس ما در واقع اینجا با کدهای چیدمان (layout) کارمون تموم شده
پس بریم سراغ تگ Aside که در بالای صفحه داریم
چون این کدی که الان نوشتیم
در واقع باید برای همه روش‌های چیدمان اعمال بشه
پس بیایم این کامنت‌ها رو از اینجا حذف کنیم
و همینطور این width رو هم
چون ما قبلاً اون رو در انتهای فایل تعریف کرده‌ایم
خب پس ذخیره‌اش کنیم
و حالا در واقع دلیلی که
اینجا کمی فاصله هست اینه که
در ابتدای کار
ما به تگ اینجا یک margin اضافه کرده بودیم
یعنی به همین لیست نامرتب
چون در غیر این صورت بولت‌ها (bullet points) ناپدید می‌شدند
یادتون هست
اما حالا در واقع دیگه اینجا نمی‌خوایمش
پس نباید هیچ margini باشه
چون در این حالت هیچ منطقی نداره
خب اینجا ما هم داریم و هم
و این هم margin-left با مقدار 50 که الان گفتم
پس بیایم در html ببینیم
آیا این لیست اینجا کلاس خاصی داره
بله داره
پس کلاسش related هست
خب بیایم اون رو کپی کنیم
و شاید همین حالا هم جایی باشه
اینجاست
پس related یک list-style: None داره
و بیایم بگیم margin هم نداشته باشه
باشه؟
پس در سلکتور UL ما یک margin-left داریم
که روی مقداری تنظیم شده اما ما می‌تونیم همه marginها رو
به طور همزمان بازنویسی کنیم
و اون رو برابر صفر قرار بدیم
باشه؟
پس فعلاً بهتر شد
و حالا بیایم برگردیم و کمی padding اضافه کنیم
درسته؟
وقتی ما فضای داخل یک المان رو می‌خوایم
نباید از margin استفاده کنیم
و برای همینه که اون رو حذف کردیم
اما ما هنوز می‌خوایم مقداری فضا داخل Aside داشته باشیم
و بنابراین باید padding اضافه کنیم
خب بیایم بگیم 40 پیکسل
و حالا وقتی ذخیره کنم ببینید چه اتفاقی می‌افته
پس الان دارم ذخیره می‌کنم
و حالا یهو ناپدید شد
کل Aside از بین رفت
خب بیایم ببینیم چی شد
و دلیلش اینه که
حالا اون المان خیلی بزرگ شده
پس بیایم بررسیش کنیم
و خب
در حال بررسی Aside هستیم
ما اون رو روی عرض 300 پیکسل تعریف کرده بودیم درسته؟
اما بعد padding با مقدار 40 پیکسل
که تازه اضافه کردیم به عرض کلی اضافه شد
چون این رفتار پیش‌فرض مدل جعبه‌ای هست
یا همون Box Model
و حالا عرض کلی این المان شده 380 پیکسل
که دیگه بین عرض این مقاله (article) جا نمی‌شه
پس عرض مقاله 825 پیکسل هست
و اگه این بالا توی این گوشه دقیق نگاه کنید
وقتی روش هاور می‌کنم می‌بینید که کمی عریض‌تره
بیشتر از فضایی که برای قرار گرفتن Aside وجود داشت درسته؟
خب پس چطور این مشکل رو حل کنیم؟
باید دستی سایز Aside رو تغییر بدیم
تا padding رو هم در نظر بگیره؟
یا شاید راه دیگه‌ای وجود داره؟
بله قطعاً یک راه بهتر وجود داره
و حالا وقتشه که رفتار پیش‌فرض مدل جعبه‌ای رو کنار بذاریم
یا همون Box Model
پس بیایم سریع نگاهی بندازیم
به اینکه نسخه دیگه مدل جعبه‌ای
چطور کار می‌کنه و چه شکلیه
و فقط برای یادآوری این روش پیش‌فرض هست
که مدل جعبه‌ای عرض و ارتفاع المان‌ها رو محاسبه می‌کنه
عرض و ارتفاع‌ها
پس همونطور که بارها در عمل دیدیم
هر وقت ما یک height یا width مشخص کنیم
مدل جعبه‌ای border و padding
رو روی اون مقدار اضافه می‌کنه
و همین دقیقاً باعث شد شرایطی پیش بیاد
که الان توش هستیم
روی صفحه‌مون یعنی در چیدمانمون
درسته؟
پس نوار کناری به خاطر padding بیش از حد بزرگ شد
و بنابراین دیگه کنار مقاله جا نشد
پس عالی می‌شد اگه
ما فقط یک height یا width مشخص تعریف می‌کردیم
و بعد المنت دقیقاً همون اندازه میشه
مهم نیست چه بوردر یا پدینگی داشته باشه
خب در واقع بله ما می‌تونیم خیلی راحت این کارو انجام بدیم
با اضافه کردن یک پراپرتی کوچیک به المنت
که اسمش هست box-sizing
و مقدار اون پراپرتی رو روی border-box تنظیم می‌کنیم
این یه ترفند خیلی ساده و کاربردیه که
تقریباً همه‌ی توسعه‌دهنده‌های CSS استفاده می‌کنن
ساختن لایوت‌های بزرگ بدون استفاده از box-sizing: Border-box
عملاً غیرممکنه
پس دوباره روش پیش‌فرض مدل جعبه (box model)
اصلاً منطقی نیست
برای همین همه خیلی ساده box-sizing: Border-box
رو به همه‌ی المنت‌ها اضافه می‌کنن که برای همیشه
این نوع مشکلاتی که داشتیم رو حل می‌کنه
خب همونطور که توی این دیاگرام جدید می‌بینیم
که box-sizing روی border-box تنظیم شده
حالا عرض و ارتفاعی که مشخص کردیم
از یک طرف بوردر تا طرف دیگه‌ی بوردر
کشیده میشه
که شامل محتوای داخلی و پدینگ هم میشه
و حالا محاسبه‌ی نهایی عرض
و ارتفاع خیلی ساده میشه
در واقع دیگه چیزی برای محاسبه باقی نمی‌مونه
پس عرض نهایی هر المنت دقیقاً همون عرضیه
که توی کدمون تعریف کردیم
مهم نیست چه پدینگ یا بوردر داشته باشه
و همینطور ارتفاع هم همینطوره
پس اگه حالا پدینگ یا بوردر اضافه کنیم
دیگه به ابعاد کلی جعبه اضافه نمیشه
که واقعاً کار ما رو خیلی راحت‌تر می‌کنه
حالا این همچنین یعنی
که وقتی پدینگ یا بوردر مشخص کنیم
اون‌ها باعث میشن فضای داخلی محتوا کمتر بشه
ولی معمولاً این مشکلی ایجاد نمی‌کنه
خب پس حالا
اوکی؟
بیایم برگردیم به کدمون
و این پراپرتی رو اعمال کنیم
خب
بیایم دقیقاً همون کاری رو انجام بدیم
که توی اسلاید نشون دادم و box-sizing رو روی border-box بذاریم
راستی
رفتار پیش‌فرض رو در واقع content-box می‌گن
اوکی؟
ولی چیزی که ما می‌خوایم border-box هست
پس اگه حالا اینو ذخیره کنیم
باید ببینیم که مشکل برطرف شده
و واقعاً هم درست شد
خب اگه حالا box model رو بررسی کنیم
می‌بینید که عرض بخش Aside دیگه
اون ۳۰۰ی که ما تعریف کرده بودیم نیست
بلکه کل عرض المنت
شامل این ۲۲۰ به علاوه ۴۰ و ۴۰ دیگه‌ست
که اگه همه رو جمع کنیم
دقیقاً میشه ۳۰۰ پیکسل
که همون عرضیه که ما تعریف کرده بودیم
برای این المنت
خب؟
این دقیقاً همون چیزیه که گفتم
در آخر اسلاید قبلی که دیدید
یعنی وقتی پدینگ اضافه می‌کنیم به المنت
اون از فضای محتوای داخلی کم می‌کنه درسته؟
پس دوباره عرض محتوای داخلی الان فقط ۲۲۰ هست
ولی این اصلاً مشکلی نیست
چون چیزی که ما بهش اهمیت می‌دیم
عرض کل المنت هست
و این دقیقاً همون ۳۰۰یه که ما مشخص کردیم
چون اگه دوباره خاموشش کنیم
می‌بینید این پایین دوباره برگشتیم
به اینکه ۳۰۰ فقط برای محتوای داخلی باشه
و بعدش ۴۰ در هر طرف اضافه بشه
که این چیزی نیست که ما بخوایم
و اینجا درستش کردیم
عالیه
حالا ما می‌خوایم مدل جعبه همیشه
به‌صورت پیش‌فرض روی همه‌ی المنت‌ها اینطوری کار کنه
پس چیزی که می‌خوایم اینه که
این پراپرتی برای همه‌ی المنت‌های صفحه
اعمال بشه
خب چطوری این کارو بکنیم؟
خب من اینو از اینجا برمی‌دارم
و می‌ذارمش توی universal selector
اوکی؟
و دلیل اینکه توی body نمی‌ذارم اینه که
box-sizing جزو پراپرتی‌هایی نیست
که به ارث برسه
پس نمی‌تونیم روی body ستش کنیم
باید روی universal selector بذاریم
و حالا همراه با margin و padding
این box-sizing: Border-box اعمال میشه
روی همه‌ی المنت‌ها
خب حالا ذخیره‌اش کنید و می‌بینید که هنوز درست کار می‌کنه
چیزی مثل این
چیزیه که بیشتر توسعه‌دهنده‌ها واقعاً توی CSS خودشون می‌ذارن
یه ریست ساده‌ی سراسری مثل این
و بعد فعال کردن این رفتار بهتر
برای مدل جعبه روی همه‌ی المنت‌ها
خب با این دیگه کارمون تموم شد
فقط سریع یه margin اینجا اضافه می‌کنم
به پایین این
چون داریم درباره‌ی درست کردن فاصله‌ها صحبت می‌کنیم
margin-bottom بذاریم مثلاً ۲۰ پیکسل
یا بیایم یکم بیشترش کنیم بگیم ۳۰ پیکسل
عالیه!
خب شما همین الان یه نکته‌ی خیلی مهم دیگه یاد گرفتید
در مسیرتون برای تبدیل شدن به یک توسعه‌دهنده‌ی CSS
چیزی که الان دوباره بهتون نشون دادم
چیزیه که همه‌ی توسعه‌دهنده‌های CSS انجام میدن و استفاده می‌کنن
و بنابراین خیلی مهم بود که شما یاد بگیرید
این ترفند مهم رو
و همینطور مهمه
که واقعاً بفهمید چطور کار می‌کنه
پس مطمئن بشید که دوباره اون اسلایدی رو مرور کنید
که بهتون نشون دادم و همینطور کدی که اینجا نوشتیم رو مرور کنید
و بعد آماده‌اید برای یک چالش کدنویسی دیگه
امیدوارم خیلی زود اونجا ببینمتون