وقتی با HTML کار میکنی، یکی از چیزهایی که خیلی زود باید قلقش رو بگیری، رفتار تگ های Block Level و Inline Level هست. اینا تو رندر و ساختار صفحه تاثیر مستقیم دارن و اگه اشتباه استفاده بشن، هم استایل ها بهم میریزه هم DOM ساختار درستی نداره.
تگ های Block Level
تگ های بلاک لول مثل header و ul و p و article و section و div کل عرض والد رو میگیرن و قبل و بعدشون یه خط جدید ایجاد میشه. مرورگر اینا رو به عنوان یه block formatting context در نظر میگیره و میتونی روشون margin و padding و width و height بزاری بدون دردسر.
مثال کوتاه:
<div class="card"> <h2>Title</h2> <p>Some text here</p> </div>
یه نکته مهم: بعضی تگ های بلاک مثل p فقط برای متن ساده هستن و نباید توش تگ بلاک دیگه مثل div یا section بندازی. اگه بذاری، مرورگر خودش تگ p رو میشکنه و جدا میکنه، ولی نتیجه اش معمولا بهم ریخته میشه و ساختار DOM اون چیزی نیست که انتظار داشتی. هم از نظر استایل مشکل پیش میاد، هم از نظر منطق صفحه.
تگ های Inline Level
تگ های اینلاین مثل span و a و strong و em و code فقط به اندازه محتواشون جا میگیرن و خط جدید نمیسازن. برای متن و اجزای ریز عالی هستن.
ولی محدودیت مهمشون اینه که width و height مستقیم روشون جواب نمیده و margin عمودی هم معمولا بی اثره.
اگه خواستی یه اینلاین رو شبیه بلاک رفتار بدی، از display: inline-block یا display: block استفاده کن، ولی حواست باشه که این دیگه رفتار پیش فرضش نیست.
مثال کوتاه:
<p>Click <a href="#">here</a> to continue</p>
نکات حساس و پرتکرار
- ترکیب اشتباه بلاک داخل اینلاین معمولا باعث اصلاح خودکار
DOMمیشه و خروجی غیر قابل پیش بینی میده. - برای ساختار دهی صفحه همیشه از بلاک ها استفاده کن، برای استایل دادن به متن از اینلاین.
- تگ
img از نظر رندر اینلاین محسوب میشه ولی رفتارش شبیهinline-block هست، پسmargin وwidth روش جواب میده. - برای کنترل دقیق تر، همیشه رفتار پیش فرض تگ رو بشناس و بعد تصمیم بگیر تغییرش بدی.