Elementos com display em HTML 5

Elementos com display em block, inline

Ola pessoal, espero que todos estejam bem! Hoje vamos falar sobre como alguns elementos se comportam em HTML. Cada elemento tem um valor de exibição padrão, dependendo do tipo de elemento que ele é, há dois valores de exibição: em bloco e em linha.

Elementos/Tag de nível de bloco

Um elemento de nível de bloco sempre começa em uma nova linha, ele sempre vai ocupar toda a largura disponível também, do lado esquerdo para o direito e vice e versa o mais longe possível.

Aqui estão todos os elementos de nível de bloco em HTML:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

Elementos inline

Os elementos inline não começam em uma nova linha, ele só ocupa o máximo de largura necessário.


Nota: Um elemento inline não pode conter um elemento de nível de bloco!

Aqui estão todos os elementos inline em HTML:

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