هر عنصر HTML به طور پیشفرض یک نوع نمایش (display) داره که با توجه به نوع خودش تعیین میشه. دو نوع نمایش رایج بلاک (block) و اینلاین (inline) هستن.
همیشه از یک خط جدید شروع میشن. مرورگرها به صورت خودکار مقداری فضای خالی (margin) قبل و بعد از این عناصر اضافه میکنن.
تمام عرض موجود رو اشغال میکنن. به عبارت دیگه، تا جایی که ممکنه از چپ و راست کشیده میشن.
دو تا از پرکاربردترین عناصر بلاک، <p> و <div> هستن.
عنصر <p> یک پاراگراف رو تعریف میکنه.
عنصر <div> یک بخش یا قسمت رو در سند HTML تعریف میکنه.
هر دو عنصر <p> و <div> از نوع بلاک هستن.
مثال:
<p>Hello World</p>
<div>Hello World</div>
فهرست برخی از عناصر بلاک:
<address> <article> <aside> <blockquote> <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>
از یک خط جدید شروع نمیشن.
فقط به اندازه مورد نیاز، عرض رو اشغال میکنن.
مثال:
اینجا یک عنصر <span> داخل یک پاراگراف قرار گرفته.
<span>Hello World</span>
فهرست برخی از عناصر اینلاین:
<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> اغلب به عنوان یک کانتینر (Container) برای سایر عناصر HTML استفاده میشه. این عنصر هیچ ویژگی اجباریای نداره، اما استفاده از ویژگیهای style, class و id در اون خیلی رایجه.
وقتی <div> همراه با CSS استفاده میشه، میتونه برای استایلدهی به بلوکهای محتوا به کار بره:
مثال:
HTML
<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> یک کانتینر اینلاین هست که برای نشانهگذاری بخشی از یک متن یا بخشی از یک سند استفاده میشه.
این عنصر هم مثل <div> ویژگی اجباریای نداره، اما استفاده از 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>
عنصر بلاک همیشه از خط جدید شروع میشه و تمام عرض موجود رو اشغال میکنه.
عنصر اینلاین از خط جدید شروع نمیشه و فقط به اندازه نیاز عرض اشغال میکنه.
عنصر <div> یک عنصر بلاک هست و اغلب به عنوان یک کانتینر برای سایر عناصر استفاده میشه.
عنصر <span> یک کانتینر اینلاین هست که برای نشانهگذاری بخشی از متن یا سند استفاده میشه.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/