BOX MODEL

Todos os elementos HTML podem ser considerados como caixas. Em CSS, o termo "modelo de caixa" (box model) é usado quando se fala sobre design e layout. O modelo de caixa CSS é essencialmente uma caixa que envolve todos os elementos HTML. Consiste em: margens (margin), bordas (border)
preenchimento (padding) e o conteúdo realmente (content).

Sempre quando vamos estilizar algum elemento via CSS, é comum, e precisamos estar cientes, que alguma alteração que iremos fazer possa impactar em outros elementos. Isso fica fácil de compreender quando entendemos o conceito de box model.

Basicamente, a ideia do box model é composta por essas quatro partes citadas acima (na ordem,de dentro para fora):

• conteúdo (content)

• preenchimento (padding)

• bordas (border)

• margens (margin)

Resumindo, pode-se dizer que o box model trata-se de como as 4 propriedades acima se relacionam para compor a dimensão dos elementos. O modelo de caixa permite adicionar uma borda em torno de elementos e definir espaço entre elementos. A imagem ao lado ilustra o modelo de caixa:

Explicação das diferentes partes do Box Model:

• Content: conteúdo da caixa, onde texto e imagens aparecem.

• Padding: área ao redor do conteúdo (espaçamento interno), ou seja, é o espaçamento entre o conteúdo e a sua borda. O preenchimento é transparente.

• Border: borda que circunda o preenchimento e o conteúdo.

• Margin: área fora da borda (as margens são externas, ou seja, distância entre uma caixa e outra). Margem é a distância da borda de um elemento até o Box Model de outro elemento ou até a margem do documento HTML. A propriedade margin adiciona um espaço transparente e não pode ser preenchido com nenhuma cor. Além disso, ela não pode receber bordas.

Ao lado, uma outra imagem para ajudar a entender o Box Model:

A seguir, um código de exemplo de uma caixa com a largura não especificada:

<!DOCTYPE HTML>

<head>

<title>Exemplo 1</title>

.box{

color: white;

background-color: brown;

border: 2px solid orange;

padding: 25px 10px 20px 5px;

}

</style>

</head>

<body>

O vídeo fornece uma maneira poderosa de ajudá-lo a

provar seu argumento. Ao clicar em Vídeo Online, você pode colar

o código de inserção do vídeo que deseja adicionar. Você também

pode digitar uma palavra-chave para pesquisar online o vídeo mais

adequado ao seu documento.

</div>

</body>

</HTML>

Resultado:

Esta página tem algumas margens à esquerda e à direita, mas, além disso, nossa caixa se esticará para
caber na página. Em CSS, a largura da caixa é apenas a largura do conteúdo. Para calcular a quantidade
real de espaço horizontal que a caixa irá ocupar, devemos adicionar os montantes de margem, borda e
preenchimento para cada lado.

No próximo exemplo, temos a mesma que a anterior, mas agora indicando uma largura de 200px,
ou seja, agora o conteúdo da caixa terá 300px de largura.

Abaixo, um código de exemplo de uma caixa com a largura 200px:

<!DOCTYPE HTML>

<head>

<title>Exemplo 2</title>

.box{

color: white;

background-color: brown;

border: 2px solid orange;

padding: 25px 10px 20px 5px;

width: 200px;

}

</style>

</head>

<body>

O vídeo fornece uma maneira poderosa de ajudá-lo a provar seu argumento. Ao clicar em Vídeo Online, você pode colar o código de inserção do vídeo que deseja adicionar. Você também pode digitar uma palavra-chave para pesquisar online o vídeo mais adequado ao seu documento.

</div>

</body>

</HTML>

O conteúdo da caixa tem 200px de largura. No entanto, temos margens, bordas e preenchimento à esquerda e à direita da caixa. Usando o Inspetor da Web é facilmente possível verificar isso. Clicando com o botão direito do mouse sobre a caixa e escolhendo a opção Inspecionar (ou Inspecionar Elemento), aparecem as opções conforme a imagem a seguir:

Propriedades CSS para o Box Model

Veremos a seguir as regras para aplicação das propriedades CSS margin, border e padding. O box criado no modelo de caixa é um quadrilátero em que cada um dos lados é identificado por um termo em inglês de acordo com a posição do lado. Os lados são designados da seguinte forma:

top: superior

right: direito

bottom: inferior

left: esquerdo

É possível definir cada uma dessas quatro dimensões para: margin, border, padding entre outros elementos.

Exemplo de valores para as dimensões da margin:

#elemento{

margin-top: 15px;

margin-right: 10px;

margin-bottom: 25px;

margin-left: 35px;

}

Essa é a declaração completa, porém existe uma forma mais prática para declarar a margin quando você deseja adicionar margens em todos os lados do elemento.

Exemplo simplificado de valores para as dimensões da margin:

#elemento{margin: 15px 10px 25px 35px;}

Utilizei os mesmos valores justamente para fazer a relação, na maneira curta o primeiro valor é responsável pela margem do topo, a segunda pela direita, a terceira pela da base e a quarta pela
esquerda.

Exemplo: #elemento {margin: top right bottom left};

Para não esquecer: Inicia no topo e desce em sentido horário!

Caso o valor da margem do topo seja igual ao da base e o valor da direita seja igual ao da esquerda, você também pode declarar da seguinte forma:

#elemento {margin: 25px 10px}

Ou seja, o margin, top e bottom do elemento terá de 25px, left e right terão 10px.

Exemplo: #elemento {margin: topo/base esquerda/direita}

E se todos os valores forem iguais você ainda pode declarar da seguinte maneira:

#elemento {margin: 10px;}

Todas as propriedades da margem podem ter os seguintes valores:

• auto: o navegador calcula a margem.

• length: comprimento, especifica uma margem em px, pt, cm, etc.

• %: especifica uma margem em % da largura do elemento.

• inherit: herança, especifica que a margem deve ser herdada do elemento pai.

PROPRIEDADE FLOAT

Usada para posicionar algo na tela: Left ou Right; Permite que os outros elementos possam organizar em torno dele.

A propriedade float do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor.