آموزش کار با عناصر block-level و inline-level در HTML


نویسنده:
چهارشنبه ۷ خرداد ۱۳۹۹
عناصر block-level و inline-level

تمام تگ‌های HTML در دو دسته بزرگ عناصر block-level و inline-level قرار می‌گیرند. به عبارت دیگر، هر عنصر در زبان HTML یا در دسته block قرار دارد یا در دسته inline.

اصلا این block و inline چه هستند؟

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

خروجی کد بالا:

پاراگراف اول

پاراگراف دوم

پاراگراف سوم

ادمین سایت گوگل یاهو


سوال ما این است، چرا عناصر p زیر هم نمایش داده می‌شوند اما عناصر a در کنار هم؟ چون عنصر p جزو عناصر block است و عنصر a جزو عنصر inline !

عناصر Block-level

عناصر موجود در دسته block-level همیشه از یک خط جدید شروع می‌شوند. همچنین عرض (width) این عناصر همیشه 100% است. به عبارتی کل عرض در دسترس را اشغال می‌کنند.

در مثال زیر ما چند عنصر Block-level داریم، به خروجی کار دقت کنید:

خروجی کد بالا:

من یک عنوان هستم

من یک پاراگراف هستم


در زیر لیستی از کل عناصر پرکاربردی که در دسته block-level قرار دارند آورده‌ایم:

  • h1 تا h6
  • p و pre
  • table
  • ol و ul و li
  • hr
  • article
  • aside
  • section
  • header
  • footer
  • main
  • nav
  • blockquote
  • figure
  • div
  • form

توجه: در این لیست عناصری وجود دارند که در درس‌های آینده با آنها آشنا می‌شوید.


عناصر Inline-level

عناصری که در دسته Inline-level هستند، در یک خط جدید شروع نمی‌شوند. همچنین عرض (width) این عناصر به اندازه محتوای درونشان است.

در مثال زیر لینک‌های مختلفی وجود دارند، اگر به خروجی کار دقت کنید متوجه می‌شوید هرکدام از لینک‌ها فقط به اندازه‌ متن درونشان فضا را اشغال کرده‌اند.

خروجی کد بالا:

آموزش HTML و CSS گوگل سرویس یاهو


در زیر لیستی از کل عناصر پرکاربردی که در دسته inline-level قرار دارند آورده‌ایم:

  • a
  • q
  • abbr
  • em و i
  • strong و b
  • sub و sup
  • button
  • input
  • textarea
  • label
  • select
  • code
  • span
  • img

توجه: در این لیست عناصری وجود دارند که در درس‌های آینده با آنها آشنا می‌شوید.



آیا می‌توان نوع یک عنصر را تغییر داد؟

بله، با استفاده از ویژگی display در CSS می‌توان نوع نمایش عناصر (block یا inline بودن) را تعیین کرد. در مثال زیر، عنصر p که یک عنصر block است را به یک عنصر inline تبدیل می‌کنیم:

خروجی کد بالا:

پاراگراف اول

پاراگراف دوم

پاراگراف سوم




مفاهیم گفته شده در این جلسه بسیار مهم هستند. حتما با عناصر block-level و inline-level که تا این جلسه با آنها آشنا شدید تمرین کنید تا کاملا با نحوه نمایش آنها آشنا شوید.

دیدگاهتان را بنویسید

2 پاسخ به “آموزش کار با عناصر block-level و inline-level در HTML”

  1. aminrezaee گفت:

    با سلام ممنون از اموزش فوقققق العادتون .
    امتیاز دهی در زیر برگه ها مشکل دارد و بدون محدودیت است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *