عناصر بلاکی (block-level elements) و درون خطی (inline elements) در CSS

با یکی از پایه‌ای‌ترین و بدیهی‌ترین مباحث کد نویسی صفحات وب در خدمت‌تون هستیم: عناصر HTML با شیوه نمایش بلاکی (block-level elements) و درون خطی (inline elements) در CSS

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

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

عناصر بلاکی و درون خطی چه هستند؟

در HTML لیستی بلند بالا از عناصری رو داریم نحت عنوان تگ که هر کدوم نحوه نمایش (display) پیش‌فرضی رو (بر روی صفحه) دارند.

در واقع تمام ویژگی‌هایی (properties) که یک عنصر HTML میتونه در CSS داشته باشه باید یک مقدار اولیه (پیش‌فرض) براش تعیین شده باشه که این قوانین پیش‌فرض رو مرورگرها تعیین می‌کنند.

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

عناصر بلاکی (block-level elements)

عناصر با شیوه نمایش بلاک همیشه در یک خط جدید شروع می‌شوند و عرض (width) اونها مساوی با 100 درصد عرض عنصر والدشان است.

در این عناصر مدل جعبه‌ای به صورت کامل اعمال میشه؛ یعنی ویژگی‌های padding ،height ،width و margin به درستی و در چهار جهت اعمال میشه و درست کار میکنه.

دیگر اینکه عناصر بلاکی به صورت عمودی و یکی پس از هم قرار می‌گیرند و در واقع باعث شکست شدن خط (line break) می‌شوند.

نمونه هایی از عناصر بلاکی:

• <div>
• <h1>-<h6>
• <p>
• <ul>
• <nav>

لیست کامل عناصر بلاکی (block-level elements)

عناصر درون خطی (inline elements)

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

در این عناصر، ویژگی‌های padding و margin فقط به صورت افقی (راست و چپ) تاثیر دارند و نه عمودی (بالا و پایین).

نمونه هایی از عناصر درون خطی:

• <span>
• <a>
• <img>
• <code>

لیست کامل عناصر درون خطی (inline elements)

عناصر با نحوه نمایش inline-block؟

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

معمولا هر وقت قصد داریم به عنصری با نحوه نمایش inline استایل خاصی بدیم که در حالت عادی امکان پذیر نیست، ویژگی display اون عنصر رو به inline-block تغییر میدیم و به همین راحتی همه اون مشکلاتی که با عناصر درون خطی داشتیم برطرف میشه.

با تغییر نحوه نمایش عناصر inline به inline-block عنصرمون هنوز هم line break (خط جدید) ایجاد نمی‌کنه و عرض و ارتفاعی به اندازه محتوای درونش داره با این تفاوت که حالا می‌تونیم این width و height رو به دلخواه خودمون تغییر بدیم.

به همین شکل مدل جعبه‌ای هم در عناصر inline-block به صورت عادی اعمال میشه و ویژگی‌های padding و margin در هر چهار جهت موثرند.

نمونه هایی از عناصر inline-block:

• <button>
• <input>
• <select>

نکته: در کل همه ویژگی‌های CSS و نه فقط display می‌تونن در مرورگرهای مختلف مقدارهای مختلفی داشته باشند که موارد بالا در مرورگر فایرفاکس بررسی شده و ممکنه در مرورگرهای دیگه متفاوت باشه.

چرا نحوه نمایش عناصر مهم است؟

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

وقتی مشغول ایجاد تگ‌های تو در توی HTML هستید این سه قانون رو هم به یاد داشته باشید:

• هر کدام از عناصر درون خطی و بلاکی می‌توانند داخل عنصری با نحوه نمایش بلاک ایجاد شوند.
• عناصر درون خطی، داخل هر دو عنصر بلاکی و درون خطی می‌توانند ایجاد شوند.
• عناصر بلاکی نمی‌توانند داخل عناصر درون خطی ایجاد شوند.

رعایت نکردن این قوانین خیلی راحت میتونه منجر به نتایج ظاهری ناخواسته‌ای بشه که اون هم باعث میشه مجبور بشید کدهای CSS بیشتری برای درست کردنش بنویسید.

خوبه که بدونید اکثر تگ‌های با ;display: block در HTML عناصری ساختاری هستند؛ درحالی که عناصر درون خطی بیشتر مربوط به محتوای صفحه می‌شوند. پس بهتره که موقع کد نویسی این نکته رو هم برای انتخاب تگ مناسب در نظر داشته باشید.

کلام آخر

دوستان این موارد شاید در نگاه اول بدیهی به نظر بیاد اما حداقل برای تازه کارها خیلی هم رک و پوست کنده نیست و پیچیدگی خودش رو داره.

داشتن این اطلاعات راجع به تگ‌های به ظاهر ساده HTML مساوی هست با داشتن توانایی کافی برای کار کردن با پایه‌ای ترین ابزاری که دارید؛ ابزاری که میتونید با اون طرح‌های زیبا رو به کدهایی زیباتر تبدیل کنید؛ بنابراین داشتن درکی عمیق و کامل از این مسائل باعث میشه از دیگران متمایز و تبدیل به یک دولوپر موفق بشید.

منابع