جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS

جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS

سلام دوست عزیزم! 👋 خوش اومدی به جلسه سیزدهم آموزش CSS رایا وردپرس. امروز می‌خوام یکی از مهم‌ترین مفاهیم در CSS رو بهت یاد بدم که استفاده درست از اون می‌تونه طراحی سایتت رو به کلی متحول کنه! بله درست حدس زدی، قراره درباره باکس مدل یا همون Box Model صحبت کنیم. 😎

باکس مدل چیه؟ 🤔

باکس مدل (Box Model) یه مفهوم پایه و کلیدی توی CSS هست که بهت کمک می‌کنه هر عنصر HTML رو مثل یه جعبه یا باکس در نظر بگیری و بفهمی چطور ابعاد و فاصله‌هاش تنظیم می‌شه. این مدل، هر عنصر رو به چند لایه تقسیم می‌کنه که هر کدوم وظیفه خاصی دارن. بیا با هم این لایه‌ها رو بهتر بشناسیم:

1. محتوا (Content): چیزی که توی جعبه می‌ذاری، مثل متن یا عکس.
2. پدینگ (Padding): فاصله داخلی بین محتوا و لبه جعبه.
3. بوردر (Border): خط دور جعبه که محتوا و پدینگ رو محاصره می‌کنه.
4. مارجین (Margin): فاصله بیرونی جعبه با بقیه عناصر صفحه.

باکس مدل بهت این امکان رو می‌ده که بتونی چیدمان و اندازه‌ عناصر رو به دقت کنترل کنی و در طراحی وب، بهینه‌ترین استفاده رو از فضا ببری. با دانستن نحوه‌ی عملکرد این لایه‌ها می‌تونی صفحات وبی منظم، زیبا و کاربرپسند بسازی. 🤓

×

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

برای استفاده از باکس مدل، باید از دستورات CSS مثل padding، margin، border و width/height استفاده کنی. اینا ویژگی های مهم یه باکس یا جعبه در CSS هستن:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

تو این مثال، با تنظیم این ویژگی‌ها، سایز نهایی عنصر به نتیجه‌ی جمعی از محتوا، پدینگ، حاشیه و مارجین بستگی داره. این موضوع بهت کمک می‌کنه تا طراحی‌های دقیق‌تری داشته باشی 😊 و بتونی از فضای موجود و در اختیارت نهایت استفاده برای طراحی رو ببری 🙂

مثال برای درک بهتر موضوع: 🤓

فرض کن دو تا باکس داریم که هر دو از نظر ارتفاع و عرض یه اندازه هستن. اما تنها تفاوتشون اینه که باکس دومی پدینگ داره. حالا شاید بپرسی چرا، با وجود اینکه ابعاد اولیه‌شون یکسانه، اندازه نهایی‌شون فرق می‌کنه؟

×

جلسه 8 آموزش CSS: کار با پس زمینه ها (Backgrounds) در CSS

مطالعه

🔹 باکس اول: فقط محتوا داره.
🔹 باکس دوم: علاوه بر محتوا، پدینگ داره.

وقتی به یک عنصر پدینگ اضافه می‌کنی، فضای داخلی اطراف محتوا به ابعاد عنصر اضافه می‌شه. یعنی باکس دوم به علاوه‌ی پدینگ از ابعاد مشخص شده توسط CSS بزرگتر میشه، در حالی که باکس اول همینطور باقی می‌مونه. این فرق باعث میشه در طراحی چیدمان صفحه، جایگاه و فاصله‌ها به دقت تنظیم بشه.

پس، همیشه وقتی از پدینگ استفاده می‌کنی، به خاطر داشته باش که اندازه نهایی عنصر شامل ابعاد محتوا به اضافه‌ی پدینگ هست، که این می‌تونه تفاوت قابل توجهی ایجاد کنه!

×

جلسه 10 آموزش CSS: فاصله داخلی (Padding) در CSS

مطالعه

باکس اول:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

باکس دوم:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اجزای باکس مدل رو بشناس 🙂

1. محتوا (Content) 📝

این بخش همون چیزیه که می‌خوای نشون بدی. مثلاً یه پاراگراف متن، یه عکس یا یه ویدیو. اندازه محتوات رو می‌تونی با خواص width (عرض) و height (ارتفاع) توی CSS تنظیم کنی.

مثال بزنم؟ فرض کن یه <div> داری:

×

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این یعنی محتوای داخل div سیصد پیکسل عرض و 150 پیکسل ارتفاع داره. ساده‌ست، نه؟ 😊

2. پدینگ (Padding) 🛋️

پدینگ مثل یه فضای خالی هست که بین محتوا و حاشیه های جعبه یه فضا و فاصله ایجاد میکنه. این فاصله باعث می‌شه محتوای داخل جعبه‌ات از لبه‌ها دور بمونه و ظاهرش تمیزتر بشه. می‌تونی پدینگ رو برای هر طرف (بالا، راست، پایین، چپ) جداگانه تنظیم کنی یا یه مقدار برای همه طرف‌ها اعمال کنی.

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کار باعث می‌شه فضای داخلی جعبه‌ات بیشتر بشه و قشنگ‌تر به نظر بیاد. 😌

3. بوردر (Border) 🖼️

بوردر، مرز یا قاب دور عنصر هست که می‌تونه ضخیم یا نازک باشه، به رنگ‌های مختلف.. این بخش به جعبه‌ات یه شکل مشخص می‌ده و از بقیه عناصر جداش می‌کنه.

×

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

با بوردر می‌تونی یه قاب خوشگل دور باکس یا عنصرت بکشی. 🎨

4. مارجین (Margin) 🌐

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

ابعاد جعبه یا باکس رو چطور حساب کنیم؟ 🧮

حالا که اجزای باکس مدل رو می‌شناسی، وقتشه بفهمی ابعاد کلی جعبه‌ات چطور حساب می‌شه. اینجاست که یه کم دقت می‌خواد، چون اگه حواست نباشه، ممکنه چیدمانت به هم بریزه! 😅

وقتی برای یک عنصر، width و height رو تنظیم می‌کنی، اون اعداد فقط اندازه محتوای عنصر رو مشخص می‌کنن. 😄 اما وقتی پدینگ و بوردر به اون اضافه میکنی، این فضاها به ابعاد نهایی عنصر اضافه می‌شن و باعث می‌شن که اندازه واقعی عنصر بزرگتر از مقادیری باشه که تو CSS تعریف کردی. بزار با مثال برات این موضوع رو روشن کن:

×

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا برای محاسبه ابعاد کلی خواهیم داشت:

• عرض کلی: 200px (محتوا) + 20px (پدینگ چپ) + 20px (پدینگ راست) + 5px (بوردر چپ) + 5px (بوردر راست) = 250px
• ارتفاع کلی: 100px (محتوا) + 20px (پدینگ بالا) + 20px (پدینگ پایین) + 5px (بوردر بالا) + 5px (بوردر پایین) = 150px

یعنی جعبه‌ات 250×150 پیکسل فضا اشغال می‌کنه.

تفکیک اندازه ها با استفاده از Box Sizing

ویژگی باکس سایزینگ (Box Sizing) در CSS بهت این امکان رو می‌ده که نحوه محاسبه‌ی عرض و ارتفاع یک عنصر رو دقیق‌تر کنترل کنی. این ویژگی باعث می‌شه که پدینگ و بوردر به صورت مجزا از ابعاد تعریف شده برای width و height محاسبه بشن؛ به طوری که اضافه شدن این فضاها، تأثیری بر اندازه‌ی نهایی عنصر نداشته باشه.

مقادیر Box Sizing

ویژگی Box Sizing دو مقدار اصلی داره:

×

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

1. content-box (پیش‌فرض)
2. border-box

content-box .1

توی این حالت، width و height فقط اندازه محتوا رو حساب می‌کنن. پدینگ و بوردر به این اندازه اضافه می‌شن و باعث می‌شن جعبه بزرگ‌تر از چیزی که فکر می‌کنید بشه.

فرض کنید یه باکس داریم که می‌خوایم عرض محتوای داخلش 100 پیکسل باشه:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اندازه کلی جعبه مون میشه:

• عرض محتوا: 100px
• پدینگ (چپ + راست): 10px + 10px = 20px
• بوردر (چپ + راست): 5px + 5px = 10px
• عرض کلی جعبه: 100px + 20px + 10px = 130px 😮

نتیجه: ما میخاستیم عرض 100px باشه، اما چون پدینگ و بوردر داشتیم، جعبه‌ مون 130px می‌شه! این یعنی اگه چند تا جعبه کنار هم بذاریم، ممکنه چیدمان صفحه مون بهم بریزه. پس باید همیشه حواسمون به این محاسبات باشه وقتی پدینگ و بردر داریم باید اینا رو هم به عرض جعبه مون اضافه کنیم 😕

×

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

border-box .2

در حالت border-box، مقدار width و height شامل محتوا، پدینگ و بوردر می‌شه؛ یعنی اندازه کلی جعبه دقیقا همونیه که شما تعیین کردی! 😎

فرض کنید همون باکس قبلی بالا رو داریم که می‌خوایم عرض محتوای داخلش 100 پیکسل باشه ولی این بار با border-box:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اندازه کلی جعبه مون میشه:

• عرض کلی جعبه: 100px (ثابت)
• پدینگ (چپ + راست): 10px + 10px = 20px
• بوردر (چپ + راست): 5px + 5px = 10px
• عرض محتوا: 100px – 20px – 10px = 70px 😊

نتیجه: جعبه‌مون همون 100px می‌مونه و محتوا خودش رو با فضایی که پدینگ و بوردر گرفتن تنظیم می‌کنه. اینطوری چیدمان خیلی قابل پیش‌بینی‌تره! 🎉

×

جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

مطالعه

نکته بسیار مهم 🪩

یادت باشه: مارجین فضای بیرون از عنصر رو تعیین می‌کنه و در محاسبه اندازه واقعی عنصر یا جعبه حساب نمیشه.

بیشتر طراح‌های وب ترجیح می‌دن از box-sizing: border-box استفاده کنن، چون توی این حالت دیگه لازم نیست برای پدینگ و بوردر، محاسبه‌ی اضافه انجام بدن. ✌️
وقتی عرض و ارتفاع رو مشخص می‌کنی، همون مقدار ثابت می‌مونه و پدینگ و بوردر به صورت خودکار داخل اون حساب می‌شن. این باعث می‌شه طراحی دقیق‌تر، ساده‌تر و بدون دردسر باشه! 💡

نتیجه‌ گیری

تو این مقاله تلاش کردم همه چیزهایی که درباره «باکس مدل» باید بدونی رو به شکلی ساده و کاربردی توضیح بدم. از مباحث پایه‌ای مثل محتوا، پدینگ، حاشیه و مارجین گرفته تا نکات پیشرفته مثل استفاده از box-sizing . امیدوارم این آموزش بتونه قدم‌های اولیه تو رو در دنیای CSS محکم کنه و بهت کمک کنه تا طراحی‌های حرفه‌ای و مدرنی بسازی. حالا وقتشه که دانشت رو به کار ببری و نتایج فوق‌العاده‌ای رو مشاهده کنی. موفق باشی و با انگیزه🏆 تا جلسه بعدی به خدای بزرگ میسپارمت.

×

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه