Em se trantando de leiautes, o box model pode assumir diferentes maneiras de tomar o seu espaço.
- display: block
-
Assume a mesma largura do elemento pai.
Assume a largura do conteúdo.
Pode ter a largura e alturas definidas. - display: inline
- Assume a mesma largura do elemento pai. Pode ter a largura e alturas definidas.
- display: block: assume a mesma largura do elemento pai.
- border: a borda que circunda o elemento
- padding: área transparente entre o conteúdo e a borda
- conteúdo: área onde textos ou imagens são mostradas
Até mesmo este parágrafo é um retângulo.
p {
margin: 40px;
padding: 20px;
border: solid 4px;
}