Todo elemento HTML tem sua maneira de mostrar o valor, dependendo unicamente da natureza do seu elemento. Normalmente, o valor para esses elementos é o block e inline.
A diferença básica entre o inline e block é que o navegador acomoda os elementos de bloco um abaixo do outro e os inline à esquerda um ao lado do outro.
O que são elementos block?
Sempre começam e terminam utilizando todo a larguta da tabela. As vezes, os elementos são posicionados para esquerda.
Veja a disposição gráfica de elementos block
Veja um exemplo de elemento block:
<div>Item um</div> <div>Item Dois</div>
Outros elementos que funcionam como block:
- <address>
- <article>
- <aside>
- <blockquote>
- <canvas>
- <dd>
- <div>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>-<h6>
- <header>
- <hr>
- <li>
- <main>
- <nav>
- <noscript>
- <ol>
- <output>
- <p>
- <pre>
- <section>
- <table>
- <tfoot>
- <ul>
- <video>
O que são elementos Inline
Estes elementos consomem apenas o espaço necessário, organizam-se conforme seu tamanho.
Veja um exemplo de elemento inline:
<span>span 01</span> <span>span 02</span>
Veja outros elementos:
- <a>
- <abbr>
- <acronym>
- <b>
- <bdo>
- <big>
- <br>
- <button>
- <cite>
- <code>
- <dfn>
- <em>
- <i>
- <img>
- <input>
- <kbd>
- <label>
- <map>
- <object>
- <q>
- <samp>
- <script>
- <select>
- <small>
- <span>
- <strong>
- <sub>
- <sup>
- <textarea>
- <time>
- <tt>
- <var>