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

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

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

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

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

  1. inline–level
  2. block-level

تفاوت 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 دیگر کنارم در این خط بیایند.

نکات مهم :

  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 – اختصاصی سایت آموزی