آموزش عناصر بلوکی یا بلاکی و درون خطی (HTML Inline - Block)

هر عنصر HTML دارای مقدار نمایش پیش فرض است که بسته به نوع آن دارد. به طور کلی دو مقدار نمایش وجود دارد: بلوکی (Block) و درون خطی (Inline).

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

184

پرسش و پاسخ

0
آموزش عناصر بلوکی یا بلاکی و درون خطی (HTML Inline - Block)

عناصر بلاکی (Block) در html

عناصر بلاکی همیشه از یک خط جدید شروع می شوند.

یک عنصر بلاکی همیشه عرض کامل را اشغال می کند یعنی تا آنجا که می تواند به چپ و راست کشیده می شود.

یک عنصر بلوکی دارای حاشیه بالا و پایین است در صورتی درون خطی فاقد این حاشیه ها است.

نکته: عنصر div یک عنصر بلاکی است.

مثال: در این جا از عنصر div که یک عنصر بلاکی است استفاده کرده ایم.

<div>Hello World</div>

عناصر بلوکی یا بلاک (Block) در HTML

در زیر لیست عناصر بلوکی در HTML را برای شما لیست کرده ایم:

  • address
  • article
  • aside
  • blockqoute
  • canvas
  • dd
  • div
  • dl
  • dt
  • fieldset
  • figcaption
  • figure
  • footer
  • form
  • h1 تا h6
  • header
  • hr
  • li
  • main
  • nav
  • noscript
  • ol
  • p
  • pre
  • section
  • table
  • tfoot
  • ul
  • video

 

عناصر درون خطی (inline)

یک عنصر درون خطی مانند عناصر بلاکی از یک خط جدید شروع نمی شود.

یک عنصر درون خطی فقط به اندازه نیازش عرض اشغال می کند.

عنصر span یک عنصر درون خطی است که فقط به اندازه نیازش عرض اشغال می کند.

مثال: در این جا یک عنصر span نشان داده شده است که درون خطی است.

<span>Hello World</span>

عناصر درون خطی (Inline) در HTML

در زیر لیست عناصر بلاکی در HTML را برای شما لیست کرده ایم:

  • a
  • abbr
  • acronym
  • b
  • bdo
  • big
  • br
  • button
  • cite
  • code
  • dfn
  • em
  • i
  • img
  • input
  • kbd
  • label
  • map
  • object
  • output
  • q
  • samp
  • script
  • select
  • small
  • span
  • strong
  • sub
  • sup
  • textarea
  • time
  • tt
  • var

 

نکته: یک عنصر درون خطی نمی تواند شامل عنصر بلوکی باشد.

عنصر div

عنصر div اغلب به عنوان ظرفی برای دیگر عناصر در HTML استفاده کی شود.

عناصر div ویژگی خاصی ندارند، اما style، class و id در آن معمول هستند.

هنگامی که عناصر div با CSS همراه می شوند، می توانند برای سبک سازی بلوک های محتوا استفاده شوند.

مثال: به این مثال دقت کنید.

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

عنصر div در HTML

ببینید، یک سبک خاص برای بلاکی از محتوا با عنصر div و برخی ویژگی های CSS ایجاد شده است.

عنصر span

عنصر span یک ظرف درون خطی است که برای علامت گذاری بخشی از یک متن و یا بخشی از یک سند استفاده می شود.

عناصر span ویژگی خاصی ندارند، اما style، class و id در آن معمول هستند.

عنصر span هنگامی که با CSS همراه می شود، می تواند برای استایل بخشیدن به بخش هایی از متن استفاده شود.

مثال: به این مثال دقت کنید.

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

عنصر span در HTML

با ترکیب عنصر span و برخی ویژگی های CSS به کلمه blue استایل خاصی بخشیده شده است.

تگ های HTML

در این قسمت تگ های مورد استفاده در این مقاله در قالب جدولی به صورت خلاصه وار، توضیح داده شده است.

تگ های div و span در HTML
تگ توضیحات
Div یک بخش بلاکی را در یک سند ایجاد می کند
Span یک بخش درون خطی را در یک سند ایجاد می کند

بحث بلوک (Block) و درون خطی (Inline) عناصر در چینش عناصر بسیار مهم است که ملزم به تمرین و تکرار زیاد است.