هر المان HTML مقدار نمایش پیش فرض دارد که بستگی نوع آن المان دارد. مقدار پیش فرض نمایش برای بیشتر المان ها block یا inline است.
المان های block
بصورت پیش فرض، المان های block کل فضای المان parent (المان بالایی) خود را اشغال میکنند، و درنتیجه یک "بلاک" ایجاد میکند.
مرورگرها عموما یک المان بلاک را در سطر جدید نمایش میدهند و تا جایی که امکان دارد به سمت چپ و راست کشیده میشود.
مثال
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
خروجی مثال بالا:
This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.
المان های inline
المان اینلاین در خط جدید شروع نمیشود و طول آن به اندازه مورد نیاز است.
مثال
<div>The following span is an <span>inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div>
خروجی مثال بالا:
The following span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.
نکاتی که باید در ذهن داشته باشید
- عموما المان های بلاک میتوانند المان اینلاین و (بعضی وقت ها) المان های بلاک را درون خود داشته باشند. طبیعتا میتوان از المان های بلاک برای ایجاد ساختارهایی "بزرگتر" از المان های اینلاین استفاده کرد.
- عموما المان های اینلاین میتوانند تنها شامل داده و دیگر المان های اینلاین باشند. نمیتوان المان های بلاک را درون المان های اینلاین قرار داد.
- شما میتوانید نوع نمایش المان های بلاک و اینلاین را با کمک CSS و پراپرتی
displayتغییر دهیدو برای مثال اگر برای یک المان اینلاین مقدار پراپرتیdisplayراblockقرار دهید، به مرورگر میگوید که آن المان اینلاین را بصورت بلاک نمایش دهد و بالعکس. اما دقت داشته باشید که با این کار شما نمیتوانید مدل محتوایی یک المان را تغییر بدهد. به عبارت دیگر، اگرdisplayالمانspanراblockکنید، باز هم مجاز نیستید تا المانdivرا درون آن قرار دهید.
مطالعه بیشتر: المان های بلاک (block) و اینلاین (inline) در زبان HTML
لیست المان های بلاک
<address>- Contact information.
<article>HTML5- Article content.
<aside>HTML5- Aside content.
<blockquote>- Long ("block") quotation.
<canvas>- Drawing canvas.
<dd>- Describes a term in a description list.
<div>- Document division.
<dl>- Description list.
<dt>- Description list term.
<fieldset>- Field set label.
<figcaption>HTML5- Figure caption.
<figure>HTML5- Groups media content with a caption
<footer>HTML5- Section or page footer.
<form>- Input form.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- Heading levels 1-6.
<header>HTML5- Section or page header.
<hgroup>HTML5- Groups header information.
<hr>- Horizontal rule (dividing line).
<li>- List item.
<main>- Contains the central content unique to this document.
<nav>- Contains navigation links.
<noscript>- Content to use if scripting is not supported or turned off.
<ol>- Ordered list.
<output>HTML5- Form output.
<p>- Paragraph.
<pre>- Preformatted text.
<section>HTML5- Section of a web page.
<table>- Table.
<tfoot>- Table footer.
<ul>- Unordered list.
<video>HTML5- Video player.
لیست المان های اینلاین
<a><abbr><acronym><audio><b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed>
<i><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp>
<script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>