تفاوت بلاک لول و اینلاین لول در زبان اچ تی ام ال
در این مقاله از سایت آموزی در مورد تفاوت inline-level و block-level توضیحاتی را ارائه می کنیم.
inline-level و block-level و تفاوت آنها در زبان html :
در مقاله های قبلی با مفهوم تگ در html آشنا شدیم. امروز یک خصوصیت مهم المان ها رو براتون میگم.
المان ها (elements) در html به دو شکل هستند:
- inline–level
- block-level
تعریف تگ های 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
نکات مهم :
- تگ های inline–level می توانند در داخل تگ های block–level بیایند.
- تگ های block–level هرگز نمی توانند در بین تگ های inline–level قرار گیرند.
پیوندهای کاربردی و مفید
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
تفاوت inline-level و block-level در تگ های html – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید