سرخط خبرها

تگ Block-level و Inline-level

تگ Block-level و Inline-level

آیا تا به حال در هنگام کدنویسی html با این مشکل مواجه شده اید که بعضی عناصر را با اینکه در خطی جداگانه نوشته اید ولی باز هم کنار دیگر الـمنت ها در مرورگر نمایش داده می شوند؟ درست است که شما با تگ </ br> می توانید عنصر را در یک خط جدا قرار دهـید ولی همیشه نمی توان از این تگ برای جدا کردن عناصر استفاده کرد. عناصر html به دو گروه inline level و block level تقسیم می شوند که این ویژگی ها، نقش تعیین کننده ای در طراحی وب سایت شما دارند.

ما در این پست مشخصات و رفتارهای هر دو گروه از عناصر html را برای شما توضیح خواهیم داد. همچنین کاربردها و نکاتی که inline و block levelها دارند را با مثال برای شما تشریح خواهیم کرد تا به راحتی با مفهوم این ویژگی ها آشنا شوید.

برای اهدافی مثل استایل بندی، خیلی از المنتهای HTML به دو گروه Block-level elements و Inline-level elements تقسیم میشن. معمولا المنتهای Block-level المنتهای ساختاری هستند و میتونن شامل گروه بزرگی از المنتها بشن اما المنتهای Inline-level المنتهای بر پایه متن(Text-base) هستند.

 

Block-level elements

بعضی از المنت های Block-level:

<p>, <div>, <form>, <header>, <nav>, <ul>, <li> , <h1>

مشخصات و رفتارهای این نوع از المنتها:

  • اگر مقدار Width تعیین نشود،پنهای المنت به اندازه پنهای المنت والد میشود.
  • اگر مقدار Height تعیین نشود،ارتفاع المنت به اندازه ارتفاع المنت فرزند میشود.
  • میتواند از ویژگی های margin و padding استفاده کند.
  • ویژگی vertical-align را نادیده میگیرد.

Block-level المنت ها حداقل روی یک پاراگراف تاثیر می گذارند. حالا این یعنی چه؟ عرض می کنم خدمتتون.

ببینید وقتی ما از تگی به نام h1 استفاده می کنیم اگر دقت کنید این تگ دو خط از بالا و پایین فاصله می اندازد و اگر متنی بعد از این تگ نوشته شود، دو خط بعد به نمایش در می آید .. خودتان تست کنید.. به این جور تگ ها که دو خط از بالا و پایین فاصله می اندازند و روی یک پاراگراف عمل می کنند block-level المنت می گویند.

تگ های زیادی هستند که جزو block-level المنت ها هستند که می توان به تگ هایی همچون :

اشاره کرد.همه این تگ ها بر روی یک پاراگراف اثر می کنند و دو خط از بالا و پایین با متن قبل و بعد خودشان فاصله
می اندازند.

Inline-level elements

بعضی از المنت های Inline-level:

<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>

مشخصات و رفتارهای این نوع از المنتها:

  • به اندازه متن در می اید.
  • ویژگیهای Height و Width را نادیده میگیرد.
  • تنظیمات margin-top و margin-bottom را نادیده میگیرد.
  • اگر از ویژگی float برای این المنتها استفاده شود بصورت خودکار به المنت Block-level تبدیل میشوند.

قوانین جای گیری المنتها

اینا یکسری قوانین جای گیری المنت ها هستند منظور از جای گیری اینه که چه المنتهایی در چه المنتایی میتونن قرار بگیرن! اما استثنا هم در اونها وجود داره و همیشه این قانون ها درست نیستن.

  • المنتهای Block-level میتوانند در دیگر المنتهای Block-level قرار بگیرند.
  • المنتهای Inline-level میتوانند در دیگر المنتهای Inline-level قرار بگیرند.
  • المنتهای Inline-level میتوانند در المنتهای Block-level قرار بگیرند.
  • المنتهای Block-level نمیتوانند در المنتهای Inline-level قرار بگیرند.

طبق قوانین بالا، المنتهای Block-level نمیتونن تو المنتهای Inline-level قرار بگیرن اما گفتیم که استثنا هم وجود داره مثلا المنت <a> میتونه بیشتر المنتها رو پوشش بده.

QR Code For: تگ Block-level و Inline-level

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.