Trabalhando com a propriedade display em CSS

Você já sabe que todas as tags pertencem a um determinado modelo de caixa. No entanto, se desejar, você pode mudar o modelo usando a propriedade display. Usando o valor block desta propriedade, um elemento pode se tornar um elemento de bloco, e usando o valor inline - um elemento em linha.

Vamos fazer com que as tags span se comportem como elementos de bloco:

<span>texto</span>
<span>texto</span>
<span>texto</span>

span {
	display: block;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-bottom: 20px;
}

E agora vamos fazer com que as tags div se comportem como elementos em linha:

<div>texto</div>
<div>texto</div>
<div>texto</div>

div {
	display: inline;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Suponha que você tenha vários parágrafos em seu código HTML. Faça com que eles se comportem como elementos em linha.

Suponha que você tenha vários links em seu código HTML. Faça com que eles se comportem como elementos de bloco. Defina uma borda, largura e altura para eles.