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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

93

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

93

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

هر عنصر HTML دارای مقدار نمایش پیش فرض است که بسته به نوع آن دارد.

به طور کلی دو مقدار نمایش وجود دارد: بلوکی (Block) و درون خطی (Inline).

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

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

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

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

نکته: عنصر 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 استایل خاصی بخشیده شده است.

خلاصه مقاله

در کل دو مقدار نمایش وجود دارد: بلوکی (Block) و درون خطی (Inline)

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

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

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

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

تگ های HTML

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

 

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

 

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

به پایان یکی دیگر از مقالات مهم HTML رسیدیم.

در مقاله بعدی در مورد یکی از اساسی ترین مباحث HTML یعنی کلاس ها (Classes) با شما صحبت خواهیم کرد.

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


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی