100% کامل شده تا
به‌روزرسانی شده در: ۲ روز پیش

عناصر Block و Inline در اچ‌تی‌ام‌ال (Block and Inline Elements)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


هر عنصر یک مقدار نمایش پیش‌فرض براساس نوع آن عنصر را دارد.[۱]

دو مقدار نمایش عبارتند از :block و inline.


عناصر سطح بلوک

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

عنصر <div> یک عنصر سطح بلوک است.

مثال

<div>Hello World</div>

مثال

<!DOCTYPE html>
<html>
<body>

<div style="border: 1px solid black">Hello World</div>

<p>The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>

Responsive demo.svg


عناصر سطح بلوک در HTML:




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

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

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

مثال

<span>Hello World</span>

مثال

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body>
</html>

Responsive demo.svg


عناصر درون خطی HTML:


توجه: یک عنصر درون خطی نمی‌تواند شامل یک عنصر در سطح بلوک باشد!


عنصر <div>

عنصر <div> اغلب بعنوان یک ظرف (Container) برای عناصر 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>

مثال

<!DOCTYPE html>
<html>
<body>

<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>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

</body>
</html>

Responsive demo.svg



عنصر <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>

مثال

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<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>

</body>
</html>

Responsive demo.svg



خلاصهٔ بخش (Chapter Summary)

دو مقدار نمایش وجود دارد: block و inline
یک عنصر در سطح بلوک همیشه از یک خط جدید شروع می‌شود و تمام عرض موجود را اشغال می‌کند
یک عنصر خطی در یک خط جدید شروع نمی‌شود و فقط به اندازه لازم عرض می‌گیرد
عنصر <div> یک سطح بلوک است و اغلب به عنوان ظرفی برای سایر عناصر HTML استفاده می‌شود
عنصر <span> یک محفظه درون خطی است که برای علامت گذاری بخشی از یک متن یا قسمتی از یک سند استفاده می‌شود


تگ‌های HTML


منابع آموزشی