آموزش HTML – المنتهای Block-level و Inline-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-element

 

Inline-level elements

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

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

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

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

inline elements

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

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

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

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

نکته: اگر میخواید ببینید که کد رو استاندارد نوشتید از این ابزار استفاده کنید.

 

Replaced elements

این دسته از المنتها ویژگی هر دو گروه رو دارن. بیشتر به Inline-level نزدیک هستند اما میتونن مثل Block-level ها property(خاصیت، ویژگی) های width و height هم داشته باشن.

المنت ها که این عضو این دسته هستن:

<img>, <object>,<button>, <textarea>, <input>,<select>

 

9 دیدگاه برای «آموزش HTML – المنتهای Block-level و Inline-level»

  1. سلام،واقعا آموزش های شما عالی است.من تا حالا تو هیچ سایتی انقدر کاربردی آموزش ندیده بودم.دوستدارم در مورد آموزشهاتون با هم همکاری کنیم و یه پیشنهاد دارم.در صورت امکان خواهشمندم به بنده ایمیل بزنید و یا شمارتونو برام بفرستید که باهاتون تماس بگیرم.ممنون

پاسخ دهید

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

به سوال زیر پاسخ بدهید *