Conhecer estilos do blog - medidas

Depois de ter explicado como configurar o fundo (background) das varias partes do blog, decidi hoje falar de medidas.
É algo bastante importante num blog e que nem todos entendem como funciona.

Existem 4 tipos principais de medidas a ter em conta num blog que são:

Width: - define a largura de qualquer objecto.
Height: - define a altura.
Margin: - define a distância exterior de um objecto ao objecto que se encontre ao seu lado.
Padding: - define a distância interior da borda aos objectos.

Width
Na largura (width) existem as possibilidades de usar dois tipos de medidas, os pixels e a percentagem. Na ausência deste estilo a medida por defeito é a largura total disponível, ou seja 100%, mas esta medida pode ser fixada no valor que nós quisermos.
Por exemplo, se definirmos a largura total do blog para 50%, o blog vai ocupar metade da área visível do monitor, qualquer que seja a definição que se use nesse mesmo monitor.
Este estilo aparece-nos nos mais variados objectos que usamos no nosso blog, quer sejam vídeos, fotos, áreas de texto, etc.
Acontece muitas vezes que ao querermos publicar um vídeo, o player fique mais largo que a área onde o publicamos, quer seja num post ou na coluna lateral. Para resolver este problema basta que, no código desse vídeo, se procure este estilo, width, e se altere a medida que se encontra logo à frente.
Um exemplo disso é a publicação de um vídeo do Youtube num post. O vídeo do Youtube tem predefinido a largura de 425px e no entanto a área de publicação dum blog original do blogspot é 410px. Como podem ver, existe uma diferença de 15px que é o suficiente para que o vídeo fique a ocupar mais espaço que o que pretendíamos. A solução para este problema é alterar a largura do vídeo para a mesma medida que a área de publicação ou ainda mais fácil, alterar para 100% que irá fazer com que o vídeo se adapte à largura disponível.

Height
A altura (height) não é tão utilizada como a largura mas no entanto existem situações em que temos que fixar uma altura limite.
Numa foto ou vídeo, por exemplo, quando ajustamos a largura (width) convém sempre ajustar proporcionalmente a altura para que a imagem não fique deformada.
Tal como disse, esta alteração deve ser proporcional. Se uma imagem tiver as medidas 400 X 300 (400px de largura e 300px de altura), nós ao reduzirmos a largura para 300px, 75% do original, na altura vamos ter que reduzir os mesmos 75% (75% x 300 = 225px). Resumindo, na largura reduzimos 100px e na altura reduzimos 75px.

No entanto, nas áreas do blog, este estilo normalmente não é definido e a ausência do mesmo funciona de maneira diferente da largura. Enquanto que o width assume a área disponível exterior, o height assume a medida necessária ao seu conteúdo. É por isso que quantas mais coisas tivermos na página inicial, mais longo irá ser o blog.

Margin
Outro estilo a ter em conta é o margin. Este estilo, tal como disse, define a distância exterior de qualquer objecto a outro objecto.
É usado principalmente quando não queremos que qualquer objecto inserido no blog fique encostado à borda. Numa imagem publicada junto a um texto, se definirmos que margin: 10px, a imagem irá ficar afastado do texto 10 pixels.
As medidas para este objecto podem ser definidas das seguintes formas:
margin-top:
margin-right:
margin-bottom:
margin-left:

Ou, em alternativa, compilarmos tudo numa linha:
margin: 10px 10px 10px 10px;
A primeira medida refere-se ao topo, a segunda à direita, a terceira ao fundo e a quarta à esquerda. O valor 10px é exemplificativo.

Podemos também usar a propriedade auto para o objecto se auto-ajustar.
Ex: margin: 10px auto;
Neste caso o objecto irá ficar 10px distanciado do topo, mas irá assumir distâncias iguais em todos os outros lados. Serve, por exemplo, para centrar algo.

Padding
Por fim, vou falar do estilo padding. Este estilo funciona, mais ou menos, como o margin mas define a distância interior da borda de qualquer área ao seu conteúdo.
Um exemplo da utilização deste estilo é na área de publicação, se usarmos o padding-left: 10px, todos os artigos que publicarmos irão ficar com 10 pixels de distância da borda esquerda dessa mesma área.

Para usar este estilo podemos fazer como no margin:
padding-top:
padding-right:
padding-bottom:
padding-left:

Ou compilado numa linha:
padding: 10px 10px 10px 10px;

(ordem: topo, direita, fundo, esquerda)