Modelo de Caixas

De forma simples e objetiva, baseado em um conceito chamado “box model”, a grande maioria dos elementos HTML que temos em sites são como caixas. Elas são containers que armazenam conteúdos ou até mesmo outras caixas.

Exemplo

Abaixo você verá um exemplo de um elemento <p> usando box model.

Exemplo de Caixa

Nessa caixa podemos ver as seguintes propriedades:

width: Largura da caixa;
height: Altura da caixa;
border: Borda da caixa (tamanho, tipo, cor(verde escuro), arredondamento);
padding: Preenchimento da caixa (conteúdo invisível);
outline: Contorno da caixa (tamanho, tipo, cor(azul claro));
margin: Margem da caixa.

Tipos de Caixas

Dependendo do comportamento da caixa, podemos classificar um elemento em uma de duas categorias:

block-level

Um elemento dito block-level sempre vai se iniciar em uma nova linha e vai ocupar a largura total do elemento onde ele está contido (se não especificado nenhuma largura). Se não estiver contido em nenhuma outra caixa, ele vai ocupar 100% da largura do corpo do documento.

Exemplo de alguns elementos HTML que são block-level:

adress	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	tfoor	ul	video

Exemplo de caixa block-level

inline-level

Um elemento do tipo inline-level não vai começar em uma nova linha, e sim no ponto exato onde foram definidos. E a largura dele vai ocupar apenas o tamanho relativo ao seu conteúdo.

Exemplo de alguns elementos HTML que são inline-level:

a	abbr	acronym	b	bdo	br
button	cite	code	dfn	em	i
img	input	kbd	label	map	object
output	q	samp	script	select	small
span	strong	sub	textarea	tt	var

Exemplo de caixa inline-level