جلسه 21 آموزش CSS: عناصر Block و Inline در CSS

سلام دوست من! 👋 خوش اومدی به یه جلسه دیگه از آموزش CSS! امروز قراره با هم در مورد عناصر Block و Inline در CSS صحبت کنیم.

شاید الان بپرسی اینا دیگه چی‌ان و به چه دردی می‌خورن؟ 🤔 بذار خیالت رو راحت کنم، فهمیدن تفاوت این دو تا عنصر، کلید اصلی برای چیدمان (Layout) درست و حسابی صفحات وب هست. اگه می‌خوای کنترل کاملی روی نحوه نمایش المان‌هات توی صفحه داشته باشی، باید فرق بین Block و Inline رو مثل کف دستت بلد باشی.

عناصر Block و Inline چی هستن؟

بیا اول بفهمیم این دو تا چه فرقی با هم دارن و هر کدوم چه کارایی دارن.

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

عناصر Block

عناصر Block مثل یه جعبه بزرگن که هر کدوم یه خط جدید رو توی صفحه شروع می‌کنن و کل عرض صفحه رو می‌گیرن (مگه اینکه خودت اندازه‌شون رو تغییر بدی). فکر کن مثل یه بلوک ساختمانی که زیر هم چیده می‌شن! 🧱 تگ‌هایی مثل:

• <div>
• <p> (پاراگراف)
• <h1> تا <h6> (تیترها)
• <ul>, <ol>, <li> (لیست‌ها)

معروف ترین عناصر بلاکی هستن.

مثلاً، اگه یه <div> توی کدت بذاری، اون یه بلوک جدید می‌سازه و هر چیزی که بعدش بیاد، توی یه خط جدید قرار می‌گیره. این باعث می‌شه برای بخش‌بندی صفحه خیلی مناسب باشن.

عناصر Inline

حالا برسیم به عناصر Inline. اینا مثل یه کلمه توی یه جمله‌ان؛ فقط جای خودشون رو می‌گیرن و توی همون خطی که هستن باقی می‌مونن. 🖌️ تگ‌هایی مثل <span>، <a>، <img>، <strong> و <em> از این دسته‌ان.

کار با عناصر Block و Inline در CSS

حالا که فهمیدی این عناصر چی‌ان، بهت میگم چطور می‌تونی باهاشون کار کنی 🤝

عناصر Block برای ساختار دادن به صفحه عالی‌ان. مثلاً، می‌تونی با <div> بخش‌های مختلف سایتت رو جدا کنی، مثل هدر، بدنه و فوتر. از طرف دیگه، عناصر Inline برای تغییرات کوچیک توی یه خط، مثل لینک دادن یا استایل دادن به یه کلمه خاص، بهترین انتخابن.

مثال از حالت‌های نمایش بلاکی و اینلاینی

بیا با دو تا مثال ساده، تفاوتشون رو بهتر ببینیم.

مثال 1: ترکیب Block و Inline

فرض کن می‌خوای یه پاراگراف بنویسی و یه کلمه رو توی اون برجسته کنی. می‌تونی اینجوری کد بزنی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

اینجا <p> یه عنصر Block هست و کل عرض صفحه رو می‌گیره، ولی <span> که Inline هست، فقط دور کلمه “خفن” می‌چرخه و توی همون خط می‌مونه. نتیجه؟ یه پاراگراف قشنگ با یه کلمه آبی! 💙

مثال 2: چند عنصر Inline کنار هم

حالا فرض کن می‌خوای چند تا لینک رو کنار هم بذاری:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

چون <a> یه عنصر Inline هست، این سه تا لینک توی یه خط قرار می‌گیرن و فضای اضافی اشغال نمی‌کنن. مثل یه ردیف مرتب و شیک! ✨

تغییر حالت نمایش تگ‌ها با استفاده از CSS

یکی از باحال‌ترین چیزایی که توی CSS می‌تونی انجام بدی، اینه که حالت نمایش تگ‌ها رو عوض کنی. با خاصیت display می‌تونی یه عنصر Block رو به Inline تبدیل کنی یا برعکس. بیا ببینیم چطوریه!

تغییر Block به Inline

فرض کن یه <div> داری و می‌خوای توی یه خط بمونه:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

با این کد، <div> دیگه یه بلوک جدید شروع نمی‌کنه و مثل یه عنصر Inline رفتار می‌کنه. مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

نتیجه؟ هر دو <div> کنار هم توی یه خط قرار میگیرن! 🌈

تغییر Inline به Block

حالا اگه بخوای یه <span> رو به صورت Block نشون بدی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

با این کار، <span> یه خط جدید شروع می‌کنه و کل عرض صفحه رو می‌گیره. مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

اینجا هر <span> یه بلوک جدا می‌شه و زیر هم قرار می‌گیره! 🟩🟦

استفاده از Inline-Block

یه گزینه دیگه هم داری به اسم inline-block. این حالت ترکیبی از هر دوئه؛ یعنی عنصر توی یه خط می‌مونه، ولی می‌تونی عرض و ارتفاعش رو تنظیم کنی. مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

اینجا هر دو <div> کنار همن، ولی هر کدوم اندازه مشخص خودشون رو دارن. خیلی باحاله، نه؟ 😍

پایان حرفام

خب، رفیق. فکر کنم دیگه با عناصر Block و Inline توی CSS حسابی آشنا شدی! 🌟 حالا می‌دونی که چطوری ازشون استفاده کنی و حتی چطوری حالت نمایششون رو عوض کنی. این چیزا پایه‌های طراحی وبن و اگه خوب بلدشون باشی، می‌تونی صفحات فوق‌العاده‌ای بسازی.

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

موفق باشی و تا جلسه بعدی، مراقب خودت باش! 🎉