تفاوت تگ های inline level و block level :
بصورت کلی عناصر HTML به دو نوع تقسیم می شوند :
Inline Level و Block Level
تگ ها و یا عناصر Block Level :
این المان ها ( elements ) تمام فضای خط را به خود اختصاص میدهند و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل میکند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغال کنند عناصر Block Level می گویند . این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المان ها اجازه نمیدهند که در کنار آنها قرار بگیرند و سایر تگ ها به زیر خود منتقل خواهند کرد . ممکن است متن و یا محتوای درون این تگ ها چند حرف و یا یک خط کامل باشد .
مثال :
<DOCTYPE html!>
<html>
<head></head>
<body>
<h1> این تگ بلاک لول می باشد </h1> <p>این تگ نیز بلاک لول می باشد </p>
</body>
</html>
مروگر سند HTML بالا را بصورت زیر برایمان نمایش خواهد داد
این تگ بلاک لول می باشد
این تگ نیز بلاک لول می باشد
همانطور که در مثال بالا مشاهده نمودید دو تگ h1 و p هر دو بلاک لول بودند و در کنار یکدیگر نوشته شده بودند اما با دلیل بلاک لول بودن اولین تگ عنصر بعدی خود را به خط بعدی منتقل کرد .
تگ ها و عناصر Inline Level :
این المان ها به اندازه ی محتوای خود فضای موجود در آن خط را اشغال میکنند و در صورتی که محتوای کمی داشته باشند به سایر المان ها و تگ های دیگر اجازه میدهند که در کنار آنها قرار گیرند .
با دیدن مثال زیر مفهوم این نوع عناصر برایتان ساده تر خواهد شد :
<DOCTYPE html!>
<html>
<head></head>
<body>
<span> تگ این لاین </span> <span> دومین تگ این لاین </span> <a href="http://int-net.ir"> طراحی سایت </a>
</body>
</html>
بعد از اجرای سند اچ تی ام ال بالا مرورگر بدین صورت به نمایش در خواهد آمد :
تگ این لاین دومین تگ این لاین طراحی سایت
در مثال بالا تگ a و دو تگ span در کنار یکدیگر نوشته شده و در نهایت با توجه به محتوای آنها در کنار یکدیگر نیز قرار گرفته اند .
نکات مهم :
تگ های Inline level میتوانند درون تگ های inline level دیگر قرار گیرند
تگ های Inline level میتوانند درون تگ های Block level قرار گیرند
تگ های Block level نمیتوانند درون تگ های inline level قرار گیرند
تگ های Block level میتوانند درون تگ های Block level دیگر قرار گیرند
با توجه به مستندات بالا به این نتیجه می رسیم که تگ هایی که Inline Level می باشند با توجه به حجم محتوای آنها میتوانند در کنار یکدیگر قرار گیرند اما تگ ها و المان های Block Level به دیگر تگ ها اجازه نمیدهند که در کنارشان قرار گیرند و تمام حجم آن خط را اشغال کرده و سایر عناصر را به خط بعد هدایت خواهند کرد .