آشنایی با عناصر Block و Inline در HTML

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


عناصر Block در HTML 

عناصر block  همیشه در یک خط جدید آغاز میشوند. و کل فضای موجود در محدوده ی خود را اشغال میکنند.(تا حد ممکن به سمت راست و چپ گسترده میشوند)

عنصر <div> یک عنصر block است.

چند مثال برای عناصر Block :

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

عناصر Inline در HTML 

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

این یک  عنصر <span> داخل یک پاراگراف  است .

چند مثال برای عناصر Inline :

  • <span>
  • <a>
  • <img>

عنصر <div>

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

عنصر <div> هیچ صفت اجباری ندارد و لی استفاده از صفات style و class برای آن رایج است.

وقتی از آنها به همراه CSS استفاده کنیم عنصر <div> میتواند برای استایل دهی بلاکی از محتوا مورد استفاده قرار گیرد.

<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>
خودتان امتحان کنید

عنصر <span>

عنصر <span> معمولا به عنوان ظرفی برای مقداری متن استفاده میشود.

عنصر <span> هیچ صفت اجباری ندارد و لی استفاده از صفات style و class برای آن رایج است.

وقتی از آنها به همراه CSS استفاده کنیم عنصر <span> میتواند برای استایل دهی قسمتی از متن مورد استفاده قرار گیرد.

<h1>My <span style="color:red">Important</span> Heading</h1>
خودتان امتحان کنید

 

منتشر شده در ۱۲ خرداد ۱۳۹۶ حمید رضا ملکی ۱۳۵۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید