Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.

“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.

Exemplo

Coloque em um arquivo html, as seguintes marcações:

Dentro do body:

<div id="conteudo">
  <h1>Olá, aqui é o título</h1>
  <p>E aqui é um <strong>paragráfo</strong>.</p>
</div>

Defina o css abaixo para o html de cima:

html { font-size: 100%; }
body { font-size: .68em; }

#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }

Explicação

1. html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
2. body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68″.

Cálculo feito: 11/16 = 0.68

A idéia é que 11px é igual a 0.68em de 16px.

Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.

Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.

Para compreender melhor esses valores definidos, veja a tabela:

O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.

Então temos uma fórmula para conversão de “px” para “em” que é:

(valor a ser convertido) / (valor de referência) = (valor que desejamos)

Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.

Veja mais conteúdo sobre unidades de medida usadas no css:

• Unidades de medida de comprimento CSS – Maujor
• Font size: the ‘font-size’ property

A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

• Posicionamento absoluto
• Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  <div id="limites">
    <div id="conteudo">
      <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
      <p>Olá mundo!</p>
    </div>
  </div>

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

• posição absoluta
• canto superior esquerdo a uma distância igual a 50% do tamanho da tela
• largura e altura
• fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

• Exemplo de alinhamento horizontal e vertical relativo a um elemento
• Posicionamento relativo
• Alinhamento horizontal e vertical

Porque utilizar botões expansíveis:

• Reduz número de arquivos;
• Reduz arquivos a serem baixados pelo usuário;
• Carregamento da página mais rápido;
• Reduz classes no HTML / linhas de CSS;
• Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Convencido disto, aprenda como fazer:

1. Criar a imagem do botão:
2. Dividir a imagem em 2 partes:
   • O botão será formado por duas peças: o lado esquerdo, e o direito.

   • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

     

     Botão expansível CSS - Passo 1

     Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

   • Selecione o lado direito
   • Abra um novo arquivo (só para ele)
   • Coloque a borda de um lado da imagem (cole no canto direito)
   • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
   • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
     
     

     Photoshop Redimensionamento

   • Salve como: botao_direito.png

3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

         <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
       

   - Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

4. Código CSS*:

         .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
         .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
       

Quem usa os botões expansíveis (HTML + CSS)?

• Construtora Tecnisa: ex.: botão de busca no topo.
• Porto Seguro: os botões verdes no meio do conteúdo.

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS