در جلسه قبل از آموزش CSS با نحوه استایل دهی جداول در CSS آشنا شدید. در این بخش قصد داریم شما را با مدل جعبه ای CSS آشنا کنیم.
مدل جعبه ای CSS نشان می دهد که عناصر چگونه به صورت بصری در صفحات وب قرار گرفته اند. این بخش از آموزش CSS بسیار بسیار مهم است و نیاز است که کامل این مفهوم را درک و یاد بگیرید.
مدل جعبه ای CSS چیست؟
هر المانی را که بتوان در صفحات وب نشان داد از یک یا چند جعبه حالت مستطیلی تشکیل شده است. مدل جعبه ای CSS (Box-Model) معمولا نشان می دهد که این جعبه های مستطیلی چگونه در صفحات وب قرار می گیرند.
این جعبه ها ممکن است خصوصیت های متفاوتی اتخاذ نمایند و به شیوه مختلفی با همدیگر تعامل داشته باشند اما به خاطر داشته باشید که هر جعبه ای دارای ناحیه محتوایی و حاشیه، padding و سایر موارد است.
نمودار زیر نشان می دهد که چگونه خصوصیت های حاشیه، مرز و Padding فضای بین عناصر در صفحات وب را تعیین می کنند.
مدل جعبه ای CSS در اصل یک کادر است که عناصر HTML را احاطه کرده و شامل margin, border, padding و محتوای عنصر است. مدل جعبه ای به ما این امکان را میدهد که دور عناصر حاشیه اضافه و بین آنها فاصله تعریف کنیم.
مختصر توضیح قسمت های مختلف :
- Content : محتوای داخل کادر که متن و تصویر میباشد
- Padding : ناحیه خالی دور محتوا است. مانند شکل بین محتوا و حاشیه قرار دارد. حاشیه داخلی (padding) دیده نمیشود. و فاصله بین محتوای عنصر و حاشیه را کنترل می کند
- Border : حاشیه ای است که دور padding و محتوا کشیده میشود
- Margin : ناحیه خالی خارجی که دور حاشیه است. حاشیه خارجی (margin) دیده نمی شود و فاصله بین عنصر با عناصر اطراف آن را کنترل می کند
ناحیه محتوا (Content)
همانطور که از نامش پیداست ناحیه ای است که محتوای عنصر در آن قرار می گیرد. مثلا اگر متنی داخل عنصر قرار دهیم در این ناحیه جای می گیرد و یا اگر عناصر دیگری به عنوان فرزندان عنصر درون آن قرار گیرند در این ناحیه خواهند بود.
اندازه این ناحیه را می توان توسط ویژگی های width و height مشخص کرد. اما توجه داشته باشید که اندازه این ناحیه بستگی به ویژگی های دیگری که به عنصر داده می شوند نیز دارد.
همینطور اینکه اگر هیچ اندازه ای به عنصر داده نشود در حالت پیشفرض اندازه محتوای داخلش را می گیرد.
عرض و ارتفاع المان ها:
معمولا زمانی که عرض و ارتفاع یک المان را به کمک خصوصیت های width و height تنظیم می کنید، در واقعیت تنها عرض و ارتفاع ناحیه محتوایی یک المان را تعریف می نمایید.
عرض و ارتفاع واقعی جعبه به فاکتورهای متعددی بستگی دارد. فضای واقعی که جعبه عناصر ممکن است داشته باشد به شیوه زیر محاسبه می گردد:
| اندازه جعبه | خصوصیت های CSS |
| عرض کلی | width + padding-left + padding-right + border-left + border-right+ margin-left + margin-right |
| ارتفاع کلی | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
نکته: مدل جعبه ای CSS، ناحیه محتوایی یا متنی یک جعبه همان ناحیه ای است که متن، تصویر، لیست ها، جداول، فرم ها، فایل های ویدئویی و سایر موارد نمایش داده می شود.
امیدوارم در این بخش آموزش CSS, از مدل جعبه ای CSS نهایت استفاده را برده باشید.
در بخش بعدی با حاشیه خارجی با margin در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
