تفاوت inline-level و block-level در زبان html | تگ inline-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

تعریف تگ های 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 قرار گیرند.

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