بلوک ها و درون خطی ها (Block & Inline)
هر عنصر HTML یک نمایش پیش فرض دارد. دو حالت معروف «بلوک (Block)» و «درون خطی (Inline)» است. بلوک یعنی روی خط جدید می آید. درون خطی یعنی در همان خط می ماند. مثل زنگ تفریح که صف ها جدا می شوند، اما حرف های کوتاه در یک صف می مانند.
عنصر بلوکی؛ عرض کامل و خط جدید
عنصر بلوکی همیشه از خط جدید شروع می شود. همچنین معمولاً تمام عرضِ در دسترس را می گیرد. نمونه های رایج: <p> و <div>.
<p>Hello World</p>
<div>Hello World</div>
نکته: <p> یعنی پاراگرافِ متن. <div> یعنی بخش بندی کلی محتوا.
عنصر درون خطی؛ در همان خط و عرضِ لازم
عنصر درون خطی روی خط جدید نمی آید. همچنین فقط به اندازه محتوایش جا می گیرد. نمونه ساده: <span>.
<span>Hello World</span>
هشدار: یک عنصر درون خطی نباید عنصر بلوکی را در خود نگه دارد.
کاربرد div؛ ظرفِ بخش های صفحه
عنصر <div> اغلب یک ظرفِ عمومی است. بنابراین با CSS می توان بلوک ها را استایل داد.
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
کاربرد span؛ هایلایت بخشی از متن
عنصر <span> برای تأکید بخشی از متن است. سپس با CSS رنگ یا وزن متن را تغییر بده.
<p>
My mother has <span style="color:blue; font-weight:bold;">blue</span> eyes.
</p>
سه گام تمرینی سریع
- یک
<div>بساز و متن بگذار. - با CSS پس زمینه آن را تغییر بده.
- داخل متن، یک
<span>رنگی اضافه کن.
مسیر ادامه یادگیری Block & Inline
برای تکمیل موضوع، صفحه سایر فهرست ها را ببین. سپس برای جزئیات ظرف ها، به div برو. همچنین مرور کلی در بلوک ها و درون خطی ها همیشه دمِ دستت باشد.
جمع بندی سریع
- بلوک خط جدید می گیرد و عریض می شود.
- درون خطی در همان خط می ماند.
<div>ظرفِ بخش های صفحه است.<span>برای تأکید متن است.- درون خطی داخلش بلوک نگذار.