عنصرهای Block و Inline
هر عنصر یک مقدار نمایش پیش فرض براساس به نوع عنصر دارد.[۱]
دو مقدار نمایش عبارتند از :block و inline.
عنصرهای سطح بلوک (به انگلیسی: Block-level)
یک عنصر سطح بلاک همیشه در یک خط جدید شروع میشود و کل عرض موجود را اشغال میکند (به سمت چپ و راست تا جایی که میتواند کِش میآید).
مثال
<div>Hello World</div>
عنصرهای سطح بلوک در HTML:
عنصرهای درون خطی (به انگلیسی: Inline)
یک عنصر درون خطی در خط جدید شروع نمیشود و فقط به اندازه نیاز عرض صفحه را اشغال میکند.
این یک عنصر درون خطی <span> داخل یک پاراگراف است.
مثال
<span>Hello World</span>
عنصرهای درون خطی در HTML:
عنصر <div>
عنصر <div>
اغلب بعنوان یک ظرف (به انگلیسی: Container) برای عنصرهای HTML دیگر استفاده میشود.
عنصر <div>
هیچ ویژگی مورد نیازی ندارد اما style
, class
و id
ویژگیهای متداول هستند.
زمانی که <div>
و CSS با باهم استفاده شوند میتواند برای استایلدهی به بلاکهای محتوا استفاده شود:
مثال
1 <div style="background-color:black;color:white;padding:20px;">
2 <h2>London</h2>
3 <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>
4 </div>
عنصر <span>
عنصر <span>
اغلب بعنوان ظرف برای متن استفاده میشود.
عنصر <span>
هیچ ویژگی مورد نیازی ندارد اما style
, class
و id
ویژگیهای متداول هستند.
زمانی که <span>
و CSS با باهم استفاده شوند میتواند برای استایلدهی به بخشهایی از محتوا استفاده شود:
مثال
<h1>My <span style="color:red">Important</span> Heading</h1>
تگ های گروه بندی HTML
تگ | توصیف |
---|---|
<div> | یک بخش در سند را مشخص میکند (سطح بلوک) |
<span> | یک بخش در سند را مشخص میکند (درون خطی) |
منابع آموزشی