09 - Box Model, Margin & Padding

به نام ایزد دانا

در این پست آموزشی در مورد مدل جعبه در CSS و تفاوت انواع فاصله صحبت خواهیم کرد.

امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000<br/>

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

خب، قبل از شروع هر چیز بیایید 2 تا چیزو به خاطر بسپاریم.

• منظور از باکس اصلی همون پنچره نمایش برنامه ماست که در حالت عادی از بالا به نوار ابزار مرورگر و از پایین به نوار وظیفه یا Task bar ویندوز و از دو طرف تا انتهای صفحه نمایش ادامه پیدا میکنه.

بازم میگم که در حالت عادی. منظور از حالت عادی ویندوز بدون تغییرات ظاهری و کاربری و یه مرورگر مثل کروم هستش.

• منظور از content همون محتوای اصلی اون بخش(نه کل صفحه. بعدا در مورد بخش ها صحبت میکنیم) هستش که معمولا در مرکز اون بخش و مبحث ما هستش.
  

برسی انواع ناحیه :

هر عنصر دارای چهار لبه می باشد. لبه margin یا همان فاصله خارجی، لبه border یا همان حاشیه عنصر، لبه padding یا فاصله داخلی و لبه Content یا محتوای عنصر.

• ا Content - محتوای box ، جایی که متون و تصاویر قرار میگیرند
• ا Padding - فضایی که اطراف محتوای یک عنصر قرار میگیرد.
• ا Border - خط دوری که بین padding و content قرار میگیرد
• ا Margin - فضایی که بیرون از border اطراف عنصر HTML قرار میگیرد

ناحیه محتوا

همانطور که از نامش پیداست ناحیه ای است که محتوای عنصر در آن قرار می گیرد. مثلا اگر متنی داخل عنصر قرار دهیم در این ناحیه جای می گیرد و یا اگر عناصر دیگری به عنوان فرزندان عنصر درون آن قرار گیرند در این ناحیه خواهند بود.

ناحیه padding

اگر از داخل عنصر به سمت بیرون حرکت کنیم بعد از ناحیه محتوا به ناحیه padding می رسیم. از این ناحیه برای مواردی از قبیل ایجاد فاصله ای بین محتوای عنصر و حاشیه دور آن استفاده می شود. همچنین در حالت پیشفرض پس زمینه عنصر علاوه بر ناحیه محتوا در این ناحیه هم نیز ترسیم می شود. این فاصله را می توان توسط ویژگی padding کنترل کرد.

ناحیه border

این ناحیه همان حاشیه دور یک عنصر است که می توان آن را توسط ویژگی border و مشتقات آن کنترل کرد.

ناحیه margin

بیرونی ترین ناحیه یک عنصر ناحیه فضای خارجی یا همان margin می باشد. که ناحیه ای شیشه می باشد که فاصله بین عنصر(در اصل border عنصر) با عناصر اطراف آن را کنترل می کند. از طریق ویژگی margin می توان این فضا را بوجود آورد.

اگر تنها یک عنصر را در صفحه تصور کنیم، عنصر اطرافِ border عنصر ما همان box اصلی است که در حالت عادی از بالا به نوار ابزار مرورگر و از پایین به نوار وظیفه یا Task bar ویندوز و از دو طرف تا انتهای صفحه نمایش ادامه پیدا میکنه. پس در این حالت margin به ما فاصله بین border و لبه صفحه نمایش رو نشون میده.

اینم یه جمع بندی :

در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.

نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ