مدرس: در این ویدیو
بیایید شروع کنیم به پیاده‌سازی عملی مدل جعبه‌ای (Box Model)
و به طور خاص marginها و paddingها
و بریم سراغ padding
و یکی از بهترین کاندیدها برای اضافه کردن کمی padding
همین المنت header اینجاست
که یک رنگ پس‌زمینه داره
پس هر المنتی که رنگ پس‌زمینه داشته باشه
تقریباً همیشه می‌تونه از padding استفاده کنه برای ایجاد فضا
بین محتوا و لبه بیرونی المنت
یادتون باشه padding در واقع
فاصله‌ایه که داخل خود المنت قرار می‌گیره
پس این المنت main header نام داره
و فکر کنم این پایین‌تر پیداش می‌کنیم
و بله اینجاست
حالا کاری که می‌خوام بکنم اینه که این تکه کد رو بردارم
که مربوط به این جعبه‌هاست و کمی بالاتر قرارش بدم
چون ترجیح می‌دم این جعبه‌های سطح بالاتر رو داشته باشم
یعنی جعبه‌هایی که شامل چندین
المنت فرزند هستن بیشتر بالا قرار بگیرن
درسته؟ پس این header اولین
از این جعبه‌های بزرگه
پس قرارش می‌دم درست بعد از body
خب
ولی حالا بیایید شروع کنیم به اضافه کردن padding
برای این کار از ویژگی padding استفاده می‌کنیم
و باید یه مقداری براش تعیین کنیم
پس بذارید از ۲۰ پیکسل استفاده کنیم
و خب پیکسل همون واحدیه که
برای ضخامت border هم استفاده کردیم
و همین‌طور برای اندازه فونت‌ها یادتونه؟
پس ببینیم نتیجه چطور می‌شه
و همون‌طور که می‌بینید حالا فضای جدیدی ایجاد شد
که بین محتوا قرار گرفته
یعنی بین همه این‌ها
و البته لبه بیرونی المنت
حالا انگار فضای اینجا با این قسمت یکیه
یعنی ۲۰ پیکسل ولی اینجا فضای خیلی بیشتری وجود داره
پس بذارید روی این المنت راست‌کلیک کنیم و Inspect رو بزنیم
و اینجا دلیلش رو می‌بینید
وقتی روی یه المنت hover می‌کنیم
در واقع margin اون المنت رو نشون می‌ده
و اون همون لایه قرمز یا نارنجیه که دیده می‌شه
درسته؟
و حالا خود header
اون فضای سبز رنگ رو می‌بینید که همون padding هست
خب؟ پس می‌بینید که در واقع padding
دور تا دور جعبه یا داخل اون رو گرفته
و واقعاً همه جا ۲۰ پیکسل هست
خب؟ پس این margin رو الان درست می‌کنیم
و بعد همه‌چیز منطقی می‌شه
خب؟ حالا پایین‌تر توی استایل‌ها
می‌تونیم مدل جعبه‌ای رو ببینیم درسته؟
و اینجا واقعاً نشون می‌ده که
padding همه‌جا ۲۰ پیکسله
روی هر چهار طرف
پس این قسمت نشون‌دهنده عرض و ارتفاعه
بعد padding بعد border و بعد margin
پس برای هر المنت یک نمایش کامل
از Box Model اینجا توی DevTools هست
و خیلی وقت‌ها این واقعاً به درد می‌خوره
پس ما قطعاً بعداً هم از این استفاده می‌کنیم
حالا این padding باعث می‌شه روی هر چهار طرف جعبه
یکسان باشه
ولی اگه بخوایم paddingهای متفاوتی
روی طرف‌های مختلف ایجاد کنیم خیلی راحت می‌تونیم
مثلاً فرض کنید بخوایم padding متفاوتی
برای چپ و راست بذاریم
خب می‌تونیم مثلاً بگیم
۴۰ پیکسل برای چپ و راست
و این دقیقاً همون کاریه که
با border هم داشتیم
یادتونه برای border هم border-top داشتیم
border-bottom چپ و راست
خب
و حالا واقعاً فضای بیشتری اینجا
در سمت چپ نسبت به پایین وجود داره
و همین‌طور در سمت راست
حتی اگر از روی محتوا خیلی معلوم نباشه
ولی با DevTools می‌تونیم ببینیم درسته؟
اینجا می‌بینید در سمت راست
۴۰ داریم سمت چپ هم ۴۰
و بعد بالا و پایین ۲۰
خب؟
ولی حالا می‌تونیم این رو حتی
به شکل بهتری بنویسیم با استفاده از چیزی به نام
شورت‌هند (shorthand)
شورت‌هند یعنی وقتی چند مقدار مختلف رو
برای یک ویژگی مشخص می‌کنیم
پس برای padding می‌تونیم به جای اینکه
فقط یک مقدار بدیم
که روی هر چهار طرف یکسان اعمال بشه
دو مقدار مشخص کنیم
و اگه این کار رو بکنیم مقدار اول می‌شه padding
بالا و پایین
و مقدار دوم می‌شه padding
چپ و راست
پس برای رسیدن به همون نتیجه قبلی
می‌نویسیم ۲۰ پیکسل و ۴۰ پیکسل
و حالا اگه این کد قبلی رو حذف کنیم
مثل این با استفاده از یک کامنت
نتیجه ما همچنان همان خواهد بود
باشه؟ پس از این نوشتار کوتاه برای افزودن ۲۰ به بالا و پایین استفاده می‌کنیم
و ۴۰ به چپ و راست
و به این شکل لازم نیست همه
این خطوط مختلف کد رو اینجا بنویسیم
می‌توانیم همه‌اش را یک‌جا انجام دهیم
حالا بیایید کمی با margin کار کنیم
و به یاد داشته باشید که marginها در واقع فضاهایی هستند
بین عناصر
پس حالا بیایید کمی فاصله بین عناصر li اضافه کنیم
یعنی همین‌هایی که اینجا هستند
می‌بینید که خیلی نزدیک به هم هستند
و ظاهر خوبی ندارند
و بنابراین می‌توانیم کمی margin اضافه کنیم
به پایین هر کدام از این عناصر
پس یه جایی این پایین باید
آها پس li همین‌جا هست
پس لازم نیست بارها و بارها اون رو انتخاب کنیم
فقط همون‌جا داخل همون قانون می‌نویسیم
خب بگیم margin-bottom برابر ۱۰ پیکسل باشه
و حالا خیلی بهتر به نظر میاد درسته؟
بیایید اینو اینجا انتخاب کنیم
And indeed we get 10 pixels و در واقع ۱۰ پیکسل گرفتیم
برای margin-bottom روی هر کدومشون
فقط به آخری اسکرول کنید چون الان
می‌خوام چیزی بهتون نشون بدم
معمولاً در آخرین آیتم لیست
نمی‌خوایم هیچ فاصله‌ای داشته باشیم
چون ما در واقع فقط فاصله می‌خوایم
بین آیتم‌ها نه در انتهای آیتم‌ها
پس دوباره آخری نباید هیچ فاصله‌ای داشته باشه
و برای این کار بیایید از یه ترفند استفاده کنیم
که در واقع چیزی بود که قبلاً یاد گرفتیم
پس می‌تونیم بگیم li و بعد last-child
و اینجا عملاً چیزی که نوشتیم رو ریست می‌کنیم
پس می‌گیم margin-bottom و مقدارشو صفر می‌ذاریم
و هر وقت که از صفر استفاده می‌کنیم هیچ واحدی مشخص نمی‌کنیم باشه؟
پس فقط می‌نویسیم صفر و این همون رو override می‌کنه
و حالا اون فضایی که اینجا داشتیم باید از بین رفته باشه
می‌بینید این آخری margin نداره اما اون قبلی
اون ۱۰ پیکسل در پایین رو داره
خیلی خوبه عالیه
و حالا ما ادامه می‌دیم و marginهای بیشتری اضافه می‌کنیم
و paddingها رو به همه عناصرمون اضافه می‌کنیم
اما قبل از اینکه این کارو بکنیم
باید در واقع چیزی به نام "global reset" انجام بدیم
پس اگه یه نگاه به صفحه‌مون بندازید
و بذارید اینو ببندیم بعد متوجه می‌شید
که اینجا در واقع کلی فاصله وجود داره درسته؟
مثلاً این فضای اطراف عنصر H2 اینجاست
بین پاراگراف‌ها هم همین‌طور
همونطور که قبلاً با dev tools دیدیم
روی بالا و پایین این H1 کلی margin بود
و وجود همه این margin و padding های پیش‌فرض
کار استایل دادن به صفحه رو سخت می‌کنه
پس چیزی که ما می‌خوایم اینه که reset کنیم
همه اون marginها و paddingها رو
و در واقع همه رو صفر کنیم
خب فکر می‌کنید چطور می‌تونیم این کارو بکنیم؟
فکر می‌کنید باید از ارث‌بری (inheritance) استفاده کنیم؟
یعنی فکر می‌کنید margin و padding به ارث می‌رسن
از یه عنصر به عنصر دیگه؟
خب بیایید تست کنیم و margin رو روی صفر بذاریم
خب بذارید ببینیم
خب در واقع یه چیزی تغییر کرد
پس body اون margin خودش رو از دست داد
پس الان همه‌چی واقعاً به لبه چسبیده
یعنی به لبه view port
یعنی خود مرورگر
اما همه عناصر margin خودشونو از دست ندادن درسته؟
پس این واقعاً راه درستش نیست
چون margin ویژگی‌ای نیست که به متن مربوط باشه
و بنابراین ویژگی‌ای نیست که به ارث برسه
از والد به عناصر فرزند
در عوض اگه بخوایم margin اعمال بشه
روی همه عناصر
اون وقت می‌تونیم از universal selector استفاده کنیم
پس margin رو صفر می‌کنیم و padding رو هم صفر
و حالا دقیقاً به همون نتیجه‌ای رسیدیم که دنبالش بودیم
پس الان همه فضاهای پیش‌فرض حذف شدن
و ما آزادی داریم صفحه‌مون رو هرطور خواستیم فرمت بدیم
و انجام کاری مثل اینجا
یعنی همین نوع global reset خیلی رایجه
پس این معمولاً اولین کاریه که انجام میدم
هر وقت پروژه جدیدی شروع می‌کنم
و همینطور یادتون باشه که این margin و padding اینجا
خیلی راحت override می‌شن
پس هر selector دیگه‌ای در واقع
این universal selector رو override می‌کنه
و در واقع همین‌جا می‌تونیم ببینیم
در main header که padding مشخص کرده بودیم
و بنابراین طبیعتاً اینجا هنوز هم دیده میشه
باشه؟ پس دوباره این class selector اینجا
اولویت بیشتری از global selector داره
و به عبارت فنی‌تر
می‌گیم که universal selector
specificity برابر صفر داره
که همینه چیزی که VS Code اینجا تو tooltip بهمون نشون میده
در حالی که از طرف دیگه
این انتخاب‌گر در یکی از این محل‌ها تعریف شده است
پس این انتخاب‌گر خاص‌تر است و اولویت بالاتری دارد
و بنابراین فاصلهٔ درونی اعمال می‌شود
و همین موضوع در این لیست هم صادق است
پس اینجا هم باید همان ۱۰ پیکسل را داشته باشیم
که قبلاً مشخص کرده بودیم
خُب حالا که این بازنشانی انجام شده است
افزودن فضاهای سفارشی بسیار ساده شده است
و می‌توانیم صفحه را واقعاً طراحی‌شده نشان دهیم
از آنجا که اینجا هستیم بیایید از همین‌جا شروع کنیم
با بخش کناری یا ادامه دادن همین قسمت
زیرا باز هم این یکی از عناصری است
که رنگ پس‌زمینه دارد
بنابراین برای ایجاد کمی فضا
باید از فاصلهٔ درونی استفاده کنیم چون در غیر این صورت
این حاشیه واقعاً به محتوا می‌چسبد
پس این چیزی نیست که بخواهیم
پس فرض کنیم فاصلهٔ درونی بالایی ۵۰ پیکسل باشد
و فاصلهٔ درونی پایینی نیز ۵۰ پیکسل تعیین شود
ذخیره می‌کنیم؛ و حالا خیلی بهتر به نظر می‌رسد
فعلاً چپ و راست را برابر صفر نگه می‌داریم
و بعداً کمی آن را اصلاح خواهیم کرد
پس چگونه می‌توانیم این را
به شکل بهتری بنویسیم؟
خب امیدوارم حدس زده باشید
و پاسخ استفاده از نوشتار فشرده (شورت‌اند) است
پس فقط فاصلهٔ درونی برای بالا و پایین
که مقدار اول آن ۵۰ پیکسل است
و مقدار دوم مربوط به چپ و راست است که می‌خواهیم صفر باشد
همین است
پس این را حذف کنید و ذخیره کنید
و هنوز همان‌طور به نظر می‌رسد
خُب
حالا بیایید به بالای صفحه برویم
و اینجا احتمالاً نیاز به فضا داریم
بین این هدر و عنصر H2 اینجا درست است؟
این خیلی بد به نظر می‌رسد
پس نیاز به مقداری فضا بیرون از این عنصر داریم
یعنی بین این دو
و برای آن می‌توانیم از حاشیهٔ پایینی استفاده کنیم
که در واقع پایین همین عنصر هدر قرار می‌گیرد
پس بیایید به هدر اصلی برگردیم
و حاشیهٔ پایینی را مثلاً ۶۰ پیکسل قرار دهیم
در واقع خیلی رایج است
که عمدتاً فضا را در پایین قرار دهیم
برای ایجاد فاصلهٔ عمودی
پس به یکی از دو مورد margin-top یا margin-bottom پایبند باشید
یا همیشه margin-bottom را استفاده کنید
یکی از آن‌ها کافی است؛ بهترین کار این است که آن‌ها را ترکیب نکنید
وقتی می‌خواهید فضای بین عناصر را ایجاد کنید
من شخصاً از margin-bottom استفاده می‌کنم
در ذهنم این روش منطقی‌تر است
خُب؟ و ادامه می‌دهیم
و شاید حالا مقداری فضا زیر این H2 اضافه کنیم
پس H2 همین‌جاست
دوباره یک margin-bottom تعیین می‌کنیم
و اینجا مقدار ۳۰ پیکسل را انتخاب می‌کنیم
و دوباره این مقادیر فعلاً نسبتاً تصادفی‌اند
بعداً از سیستمی استفاده می‌کنیم
که به‌طور خودکار این مقادیر را برای ما تولید کند
حالا بیایید بین این بخش فاصله‌ای ایجاد کنیم
یعنی بین این تصویر و بقیۀ محتوا
اگر به کدِ نشانه‌گذاری نگاه کنیم
آن بخش یعنی این تصویر این نویسنده
و این تصویر دیگر همان هدر است
پس به این هدر کمی margin-bottom اضافه می‌کنیم
و برایش نام دیگری انتخاب می‌کنم
این یکی هدر اصلی است
پس این را «هدر مطلب» می‌نامیم
پس آن را اینجا کپی می‌کنیم
و اینجا قرارش می‌دهیم
و سپس margin-bottom را برابر ۴۰ پیکسل می‌گذاریم
خیلی بهتر شد
حالا می‌خواهم به پاراگراف‌ها فکر کنم
چون فعلاً این قسمت خیلی به‌هم‌ریخته به نظر می‌رسد
با افزودن کمی فضا
در انتهای هر پاراگراف
فوراً وضعیت خیلی بهتر می‌شود
پس margin-bottom را بگذاریم و اینجا ۱۵ پیکسل امتحان کنیم
و در واقع همین الان خیلی بهتر شده است
حالا همین کار را برای لیست‌ها انجام می‌دهیم
پس حالا در این فهرست شماره‌دار
و این فهرست بدون شماره که اینجا داریم
در حال حاضر شماره‌ها و بولت‌ها حذف شده‌اند
چون در سمت چپ به مقداری فضا نیاز دارند
تا بتوانند نمایش داده شوند
پس آن‌ها را برمی‌گردانیم چون بازنشانی کلی ما
در واقع همهٔ آن فضاها را حذف کرده بود یادتان هست؟
پس آن فضا را در لیست بدون شماره می‌خواهیم
و همچنین در فهرست شماره‌دار
برای مثال margin-left را ۵۰ پیکسل قرار می‌دهیم
و حالا می‌بینید که آن‌ها برگشته‌اند
همه چیز ۵۰ پیکسل به سمت راست جابجا شد
و حالا شماره‌ها و بولت‌ها دوباره ظاهر شدند
بیایید کمی هم فضای پایین اضافه کنیم
۲۰ پیکسل
خب؟ و حالا می‌رویم سراغ H3
یعنی همین یکی اینجا
پس margin-bottom برابر ۲۰ پیکسل
و چیزی اشتباه است
انگار نمی‌توانم کلمهٔ «حاشیه» را درست بنویسم
خب حالا خیلی بهتر شد
و حالا باید کمی فاصله مشخص کنیم
بین این متن و این عنوان
الان طوری به نظر می‌رسه که فاصلهٔ
بین این دو دقیقاً یکسانه و این خوب نیست
و من عمداً این کارو می‌کنم
چون می‌خوام چیزی رو بهتون نشون بدم
پس حالا حاشیهٔ بالا رو مشخص می‌کنم
و روی ۴۰ پیکسل می‌ذارم
خب؟ حالا خیلی عالی کار می‌کنه
اما بذارید حالا با ابزار توسعه‌دهنده چیزی نشونتون بدم
پس دارم این المان رو بررسی می‌کنم
و می‌بینید که دقیقاً ۲۰ پیکسل هست
که ما برای پایین تعیین کرده بودیم
و ۴۰ پیکسلی که برای بالا مشخص کرده بودیم
اما این پاراگرافی که قبل از اون هست
درواقع یک حاشیهٔ پایینی هم داره
فکر کنم حدود ۱۵ پیکسل
همین این یکی درسته؟
پس الان این المان ۴۰ پیکسل فاصله از بالا داره
و اون یکی هم ۱۵ پیکسل از پایین
و هر دو این فضاها همین ناحیه رو اشغال می‌کنن درسته؟
و ممکنه به‌صورت شهودی فکر کنیم
که این دو فاصله با هم جمع می‌شن
یعنی این ۱۵ پیکسل اینجا به اون ۴۰ پیکسل اضافه بشه
اما درواقع اینطور نمی‌شه
می‌بینیم که درواقع فاصله بین این دو المان
واقعاً فقط ۴۰ پیکسل هست
نه ۵۵ پیکسل خب؟
و این پدیده رو می‌گن همپوشانی حاشیه‌ها
یعنی وقتی دو تا حاشیه یک فضا رو اشغال می‌کنن
فقط یکی‌شون روی صفحه دیده می‌شه
و معمولاً بزرگ‌تره نمایش داده می‌شه
مثلاً فرض کنید
اینجا هم ۴۰ پیکسل مشخص کرده باشیم
ممکن بود فکر کنیم
که اینجا واقعاً ۸۰ پیکسل شده
یعنی بر اساس همون منطق قبلی
ولی خب همچنان
فقط ۴۰ پیکسل هست به خاطر همپوشانی حاشیه‌ها
اما اگه اینجا ۱۰۰ پیکسل بذاریم چی؟
اون وقت فاصله واقعاً ۱۰۰ پیکسل می‌شه
یعنی دقیقاً همین فضای نارنجی که می‌بینید
اینی که اینجا هنوز ۴۰ پیکسل داره
اما اون یکی ۱۰۰ پیکسل
پس فاصلهٔ بین‌شون دیگه ۱۴۰ نیست
بلکه همون ۱۰۰ پیکسل پایینی پاراگرافه
خب؟ این همون چیزیه که می‌گیم
وقتی از همپوشانی حاشیه‌ها صحبت می‌کنیم
چیزی که ممکنه وقتی دربارهٔ عجایب CSS
یا ویژگی‌های عجیبش می‌شنوید بهش بر بخورید
خب؟ و اما اینجا
فکر می‌کنم تقریباً کارمون تموم شده
فقط کمی فاصله بیشتر اضافه کنیم
بین این بخش «مطالب مرتبط» و محتوای مقاله
پس ما مقاله داریم و همینطور بخش کناری
اونجا هم کمی فاصله لازم داریم
فکر نمی‌کنم مقاله رو قبلاً انتخاب کرده باشم
و به نظر میاد که نه
پس بذارید اون رو بیاریم بالا
و چون اینجام منوی ناوبری رو هم می‌گیرم
و اون رو هم می‌ذارم بالا
چون از اون المان‌های بزرگ‌تره
دوست دارم اینا رو بالا نگه دارم
و خب مقاله هم همینطور
پس می‌نویسم article
و یک حاشیهٔ پایینی ۶۰ پیکسلی می‌دم
خب؟ و اینم از این
همین شد
اینم صفحهٔ ما
که حالا با حاشیه‌ها و فاصله‌های درونی درست قالب‌بندی شده
پس یه مرور سریع:
هر وقت خواستید داخل یک المان فاصله داشته باشید
که معمولاً وقتی رنگ پس‌زمینه یا
کادر (border) داشته باشه مفیده
باید همیشه از فاصلهٔ درونی (padding) استفاده کنید
از طرف دیگه
برای ایجاد فاصله بیرون یک المان
یا برای فاصله‌گذاری بین چند المان
همیشه از حاشیه (margin) استفاده کنید
و اگه نیاز داشتید فاصلهٔ عمودی بدید
من توصیه می‌کنم بیشتر مواقع
از margin-bottom استفاده کنید
و خب این تمام چیزی بود
که دربارهٔ اضافه کردن فضا به عناصر صفحه لازم بود بدونید
و در جلسهٔ بعدی ابعاد رو هم اضافه می‌کنیم
یعنی ارتفاع و عرض
ظاهراً حتی نمی‌تونم درست کلمه‌ی margin رو بنویسم!
خب الان خیلی بهتر شد
و حالا باید یه فاصله‌ای هم مشخص کنیم
بین این متن و این تیتر (heading)
چون الان به نظر میاد فضای بین این دوتا
دقیقاً یکسانه و این اصلاً خوب نیست
و در واقع دارم این کارو انجام میدم
چون می‌خوام یه چیزی بهتون نشون بدم
پس الان margin-top رو مشخص می‌کنم
و مقدارشو روی 40 پیکسل میذارم
خب؟ عالی شد خیلی خوب کار می‌کنه
اما بذارید الان با ابزار DevTools یه چیزی بهتون نشون بدم
دارم این المنت رو بررسی می‌کنم
اینجا می‌بینید که دقیقاً 20 پیکسل فاصله داریم
برای پایینش همونطور که مشخص کرده بودیم
و 40 پیکسل هم برای بالاش
اما این پاراگرافی که قبلش هست
اونم یه margin-bottom داره
فکر کنم حدود 15 پیکسل
یعنی همین اینجا درسته؟
پس الان این المنت 40 پیکسل margin-top داره
و این یکی هم 15 پیکسل margin-bottom
و هر دو این فاصله‌ها تو همین قسمت اعمال شدن درسته؟
خب ممکنه به‌طور منطقی فکر کنیم
که این دوتا فاصله باید با هم جمع بشن
یعنی این 15 پیکسل اینجا اضافه بشه
به اون 40 پیکسل که از اینجا اومده
اما در واقعیت اینطوری نیست
می‌بینید که در حقیقت
فاصله بین این دوتا المنت
فقط همون 40 پیکسل هست
نه 55 پیکسل
این پدیده رو میگن «Collapsing Margins» یا همون ادغام شدن marginها
یعنی وقتی دوتا margin
روی یه فضای مشترک قرار بگیرن
فقط یکی‌شون واقعاً روی صفحه دیده میشه
و معمولاً اون مقدار بزرگ‌تره که اعمال میشه
مثلاً فرض کنید
اینجا هم 40 پیکسل margin تعریف کنیم
اون وقت ممکنه فکر کنیم
اینجا باید در مجموع 80 پیکسل فاصله داشته باشیم
با همون منطقی که قبلاً گفتیم
اما خب همچنان فقط 40 پیکسل هست
به خاطر همین ادغام marginها
حالا اگه اینجا مثلاً 100 پیکسل بذاریم چی؟
خب اون موقع فاصله واقعاً 100 پیکسل میشه
یعنی دقیقاً همین فضای نارنجی‌رنگی
که اینجا می‌بینید
پس این یکی هنوز همون 40 رو داره
ولی اون یکی شده 100
و حالا فاصله بین‌شون دیگه 140 نیست
فقط همون 100 پیکسل مربوط به پایین پاراگراف هست
خب؟ این همون چیزیه که منظورمونه
وقتی می‌گیم «collapsing margins»
یه اصطلاحیه که احتمالاً می‌شنوید
وقتی مردم از ویژگی‌های عجیب CSS حرف می‌زنن
یا مثلاً چیزهای غیرمعمولی که داخل CSS هست
خب؟ اما اینجا
فکر کنم دیگه تقریباً کارمون تمومه
فقط بیایم یه مقدار فاصله اضافه کنیم
بین این بخش «مطالب مرتبط» و کل محتوای مقاله
که همون Article هست
پس داریم Article و همینطور Aside
اینجا هم باید یه فاصله ایجاد کنیم
فکر نکنم تا حالا
Article رو جایی انتخاب کرده باشم
و مثل اینکه واقعاً انتخاب نکرده بودم
پس بذارید بذارمش بالاتر
و حالا که اینجام این nav رو هم می‌گیرم
و اونم می‌ذارم بالا
چون جزو المنت‌های بزرگ‌تره
من دوست دارم اینجور المنت‌ها رو بذارم بالا
و طبیعتاً همین موضوع برای Article هم صدق می‌کنه
پس Article
و یه margin-bottom قشنگ 60 پیکسل
خب؟ همین شد
تموم شد
این شد صفحه‌مون که قشنگ مرتب شده
از نظر فاصله‌ها (margin و padding)
بیاید یه مرور سریع داشته باشیم:
هر وقت خواستید داخل یه المنت فضا ایجاد کنید
که خیلی وقتا لازمه
به‌خصوص وقتی اون المنت پس‌زمینه رنگی داره
یا یه border (کادر) دورش هست اون موقع padding استفاده کنید
از اون طرف
وقتی می‌خواید بیرون یه المنت فضا درست کنید
یا فاصله‌ای بین چندتا المنت مختلف ایجاد کنید
باید margin بذارید
و اگه لازم داشتید فضای عمودی اضافه کنید
توصیه من اینه که بیشتر مواقع
از margin-bottom استفاده کنید
خب در کل همین بود
راجع به فاصله دادن به المنت‌های صفحه‌مون
و توی جلسه‌ی بعدی میایم و بُعدها (dimensions) رو هم اضافه می‌کنیم
یعنی height و width (ارتفاع و عرض)