location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | شنبه 15 آبان 1395 در ساعت 20 : 17 دقیقه | نظرات کاربران ( 3 )

تفاوت تگ های 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  به دیگر تگ ها اجازه نمیدهند که در کنارشان قرار گیرند و تمام حجم آن خط را اشغال کرده  و سایر عناصر را به خط بعد  هدایت خواهند کرد .

 

 

 

ارسال نظر

حسین : متشکرم
3 0
عالی بود مرسی.
ali : سلام عالی مختصر و مفید
1 0
خیلی عالی مختصر و مفید
Rsbj : سوال
0 0
ببخشیدتگهای inline پدینگ میگیرند؟
مدیریت : پاسخ
0 0
با سلام . بله قابلیت padding اعمال میشه روی تگ های inline
عنوان نظر :
نام شما :
ایمیل :

چگونه کدهای HTML را ببینیم؟

چگونه کد های html   را ببینیم ؟ شاید برای شما هم اتفاق افتاده باشد بخواهید بدانید پشت پرده ی وب سایت ها و انواع طراحی سایت چه اتفاقی رخ میدهد و چه کد هایی باعث میشود که وب سایت را به این صورت مشاهده میکنیم . در این مقاله این موضوع را برایتان بازگو خواهیم کرد . به منظور نمایش کد های html  , وارد یک وب سایت شوید روی صفحه ی باز شده ی سایت کلیک راست کنید و سپس با توجه به نوع مرورگر گ ...

توضیحات بیشتر

تفاوت تگ های inline level با block level در HTML

تفاوت تگ های inline level   و  block level  : بصورت کلی عناصر HTML  به دو نوع تقسیم می شوند : Inline Level  و  Block Level تگ ها و یا عناصر Block Level   : این المان ها ( elements )  تمام فضای خط را به خود اختصاص میدهند  و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل میکند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغا ...

توضیحات بیشتر

HTML چیست؟

HTML چیست؟ اچ تی ام ال در لغت مخفف کلمات Hyper Text Markup Language می باشد که به معنی زبان نشانه گذاری می باشد . HTML  زبان برنامه نویسی نبوده و از اساس و بنیان طراحی سایت می باشد . مرورگرهای ساخته شده نظیر GOOGLE CHROME , FIREFOX  , INTERNET EXPLORER  و... سندهای اچ تی ام ال را بصورت گرافیکی بر میگردانند. و عملا تگ ها و محتویات را بصورت گرافیکی اجرا خواهند کرد . تمامی عن ...

توضیحات بیشتر

انواع وب سایت

انواع وب سایت : به هنر ساخت وب سایت با استفاده از فن آوری های روز و برنامه نویسی های تحت وب و بر اساس استاندارهای وب را طراحی سایت می نامند . همانطور که در مقالات طراحی سایت و در مقاله انواع طراحی سایت گفته شد طراحی سایت به دو دسته ی کلی طراحی سایت استاتیک و طراحی سایت داینامیک تقسیم میشدند . مبحث امروز ما در مورد سایت هاییست که با تکنولوژی طراحی داینامیک عمل میکنند . وب سایت ها انواع مخ ...

توضیحات بیشتر

انواع طراحی سایت

انواع طراحی سایت : طراحی سایت به روش و شیوه ی ساخت یک یا چند صفحه از وب می نلامند که دارای خصوصیات منحصر به فرد و مشخصی در مورد حرفه ی مورد نظر دارد . طراحی سایت به صورت کلی به دو دسته ی  طراحی سایت استاتیک و طراحی سایت داینامیک تقسیم میشوند . طراحی سایت استاتیک یا ایستا در گذشته مورد استفاده قرار میگرفت .در سایت های استاتیک صاحبان آنها قابلیت تغییر در محتوا و درج و یا ویرایش ...

توضیحات بیشتر

تعریف وب سایت | وب سایت چیست؟

تعریف وب سایت | وب سایت چیست؟ در بخش طراحی سایت , وب سایت تعاریف بسیار گوناگونی دارد . اما وب سایت به مجموعه صفحاتی از وب گفته می شوند  که از طریقی با یکدیگر در ارتباط  باشند و اصولا یک سایت دارای یک صفحه ی اصلی و چند صفحه مرتبط به آن می باشد که تمامی آنها در یک سرور قرار داشته و اطلاعات آن بستگی به نوع سایت توسط شخص و یا اشخاص حقیقی و یا حقوقی که ممکن است متعلق به یک شخص و یا ...

توضیحات بیشتر
expand_less