رفتار پیش‌فرض عنصرها در چیدمان یکسان نیست. یک عنصر block معمولاً از خط تازه شروع می‌شه و فضای افقی در دسترس رو می‌گیره. عنصر inline کنار متن‌های همون خط قرار می‌گیره و عرضش با محتوا شکل می‌گیره. تگ‌هایی مثل div و p معمولاً بلوکی هستن و span معمولاً درون‌خطیه، اما ویژگی display می‌تونه این رفتار رو عوض کنه.
مثال دو تگ span رو به بلوک تبدیل می‌کنه، پس اسم تگ به‌تنهایی نتیجه نهایی چیدمان رو تعیین نمی‌کنه. خطای رایج اینه که فکر کنیم با نوشتن width روی هر span حتماً یک جعبه با همون عرض دیده می‌شه؛ روی inline معمولی، عرض مثل بلوک عمل نمی‌کنه. در نمونه آموزشی دو نوع نمایش رو کنار هم می‌بینی. به شروع خط بعدی و امتداد زمینه نگاه کن، نه فقط تفاوت نام تگ. انتخاب تگ همچنان باید بر اساس معنای محتوا باشه و CSS رفتار دیداری رو تنظیم کنه؛ برای تغییر ظاهر نیازی نیست همه عنصرها رو div کنیم.
✍️ مثال حل‌شده:
<span class="row">ردیف اول</span><span class="row">ردیف دوم</span>
<style>.row { display:block; background:#e0f2fe; }</style>
حالا نوبت توئه: در نمونه، .block باید display:block و .inline باید display:inline داشته باشد. به خط تازه و طول زمینه هرکدام توجه کن؛ هدف شناخت رفتار نمایش است و این گام نیاز به تغییر کد ندارد. متن قبل و بعد span را هم ببین تا حضورش در خط روشن شود.
فعالیت شما
در نمونه، .block باید display:block و .inline باید display:inline داشته باشد. به خط تازه و طول زمینه هرکدام توجه کن؛ هدف شناخت رفتار نمایش است و این گام نیاز به تغییر کد ندارد. متن قبل و بعد span را هم ببین تا حضورش در خط روشن شود.