تفاوت inline-level و block-level در تگ های html

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

در این مقاله از سایت آموزی در مورد تفاوت تگ های inline-level و block-level توضیحاتی را ارائه می کنیم.

inline-level و block-level و تفاوت آنها در زبان html :

در مقاله های قبلی با مفهوم تگ در html آشنا شدیم. امروز یک خصوصیت مهم المان ها رو براتون میگم.

المان ها (elements) در html به دو شکل هستند:

  1. inline–level
  2. block-level

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

تفاوت inline-level و block-level در تگ های html - سایت آموزی

تعریف تگ های inline-level :

این دسته از المان ها در html ، فقط محدوده مورد نظر خودشان را در یک خط اشغال می کنند. بطوریکه تگ ها و المان های دیگر می توانند در همان block (خط) در کنار آنها قرار بگیرند.

مثال در مورد المان های inline-level :

تگ span یک تگ inline–level می باشد. یعنی به تگ های inline–level دیگر اجازه می دهد ، که کنار خودش در همان خط قرار گیرند.

تگ span : من یک تگ اینلاین لول هستم. تگ های اینلاین دیگر می توانند کنارم در این خط بیایند.

تعریف تگ های block-level :

این دسته از المان ها در html ، کل فضای یک خط را اشغال می کنند. حتی اگر محتوای کوتاهی داشته باشند. تمام خط را به خود اختصاص می دهند. بطوریکه تگ ها و المان های دیگر می توانند در همان block (خط) در کنار آنها قرار بگیرند.

مثال در مورد المان های block-level :

تگ p (پاراگراف) یک تگ block–level می باشد. یعنی به تگ های inline–level و یا بلاک لول دیگر اجازه نمی دهد ، که کنار خودش در همان خط قرار گیرند. و تمام فضای خط را حتی اگر محتوایی کمتر از یک خط داشته باشد اشغال می کند.

تگ p : من یک تگ بلاک لول هستم. و اجازه نمی دهم تگ های block-level دیگر کنارم در این خط بیایند.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

نکات مهم :

  1. تگ های inline–level می توانند در داخل تگ های block–level بیایند.
  2. تگ های block–level هرگز نمی توانند در بین تگ های inline–level قرار گیرند.

پیوندهای کاربردی و مفید

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

تفاوت inline-level و block-level در تگ های html – اختصاصی سایت آموزی