As Propriedades width e height - Como Definir Altura e Largura (Tutorial de CSS)

Neste tutorial de CSS, iremos aprender duas das propriedades mais importantes para se criar um site: width e height, que servem para definir a largura e altura de qualquer elemento HTML.

• Baixar PDF: Apostila HTML + CSS Progressivo

Largura (width) e Altura (height) em CSS - Criando Layouts

Se você abrir um jornal e for ler alguma seção dele, e comparar com outras edições do mesmo jornal, verá que as seções possuem altura e largura de, aproximadamente, o mesmo tamanho.
Algumas seções, como Classificados, obedecem bem a estas regras de altura e largura, pois quanto maior, mais custa para os anunciantes.

O mesmo ocorre em revistas, ela possuem padrões de tamanho, tanto para largura como para altura de suas mais diferentes seções. Isso faz parte do seu design.
Visite o site da globo.com ou de outro portal: a ideia também vale.

Não importa se é imagem, título, comentário no rodapé ou logotipo, tudo tem sua altura e largura, senão vira uma bagunça, e isso torna o width e height duas das propriedades mais usadas e importantes em CSS, pois estamos falando da estruturação básica, da criação do layout de qualquer site.

Largura em inglês é width e altura é height, e o que cada uma faz é óbvio, somente pelo nome (bom que não precisamos decorar comandos sem sentido, em CSS tudo faz sentido...geralmente).

Aplicamos essas propriedades CSS no Box Model (modelo das caixas), e como qualquer elemento pode ser considerado um bloco, que faz parte de um conjunto de blocos organizados formando um layout, as propriedades width e height do CSS servem para qualquer elemento.

Ou seja, não importa se quer criar uma região de texto e definir sua largura, ou altura de uma imagem (ou ambas, width e height), ou o cabeçalho de seu site, ou sidebar...você pode aplicar as propriedades width e height do CSS a todos estes elementos de seu site, sendo assim possível criar layouts e definir seus tamanhos de uma forma bem simples, flexível e poderosa.

Como Usar As Propriedades width e height em CSS

O uso das propriedades width e height é realmente muito simples, não tem segredo, bastar dar um valor numérico como valor de tamanho, como "px", "pt", "em" ou em porcentagem %.

Por exemplo, para que o corpo de seu site tenha uma altura de 800 pixels e 500 pixels de largura, faça em sua folha de estilos CSS:

body {
 height: 800px;
 width:  600px;
 border: solid;
}

(colocamos bordas para você poder ver os efeito do uso das propriedades width e height)

Vamos supor que você vai querer que a header de seu site ocupe 100% da largura disponível e apenas 20% da altura.
No corpo do artigo, na tag article, você quer que esta parte do seu site ocupe 70% da tela e 90% da largura (os cabeçalhos geralmente são mais largos que a parte de conteúdo, pois é comum que abaixo do cabeçalho do site tenha o conteúdo e uma ou duas sidebars - menus laterais), o código CSS seria:

header {
 width: 100%;
 height: 20%;
 border: solid;
}

article {
 height: 70%;
 width:  100%;
 border: solid;
}

Crie um site simples, implemente os códigos CSS em sua folha de estilo e vá vendo os resultados, redimensione o tamanho do seu navegador e veja como o site vai se adaptando ao tamanho (pois usamos porcentagens), é importante ver a coisa acontecer, só ler não vai fazer você um bom webmaster, tem que testar!

Altura (height) e Largura (width) no Box Model no Layout de um Site

Ok, depois deste Tutorial de CSS já sabemos usar as propriedades width e height em qualquer elemento de nosso site.
Mas, de fato, que altura e largura mudamos ao usar essas propriedades?
Se você se lembrar bem de nossos estudos sobre Layout em CSS, todo elemento possui margin, border e padding.
Então, quando colocamos uma largura de 200 pixels para uma imagem, inclui a borda? A margem? E o padding?

A resposta é bem simples: não.
As propriedades width e height do CSS irão definir a altura e largura da área de conteúdo.
Ou seja, apenas daquilo que fica dentro da margin, border e padding.

Essa informação é de vital importância para todo webmaster, pois quando formos criar nossos sites, teremos que fazer alguns cálculos matemáticos para saber, de fato, quanto de espaço cada elemento de nosso layout vai ocupar na tela.

Vamos supor que queiramos que uma imagem completa (incluindo padding, border e margin) ocupe 200px de largura.
Se usarmos 1 pixel para as bordas, 4 pixel para o padding e 5 pixel de margin, só isso irá ocupar:
1+1 + 4+4 + 5+5 = 20 pixels.

Veja, temos uma borda com um pixel de largura em um lado da imagem e um pixel do outro, ocupando 2 pixels.
O mesmo para o padding, que ocupa 4px na esquerda, mais 4px na direita, totalizando 8 pixels só de padding.
De margem, temos 5 pixels de um lado e 5 de outro, assim as margens ocuparão 10px de largura.
Isso totaliza 20 pixels de largura e como queremos que todo o elemento de imagem ocupe 200px, a largura (width), de fato, da imagem, terá que ser 180 pixels (200 - 20 = 180).

O Problema em Controlar a Altura (height) em CSS

Note que na explicação anterior, neste tutorial de CSS, fizemos os cálculos da largura (width) para acomodar uma imagem, levando em conta todas as ferramentas da Box Model (padding, margin e border), mas fizemos cálculos com a largura somente.
E a altura?

Bem, definir a largura e altura de um elemento nem sempre é uma boa alternativa, embora todos tentemos ter controle sobre cada pixel de nosso site.
O motivo disso é que, alguns detalhes do layout podem ser alterados pelo navegador, pelo sistema operacional, etc.

Por exemplo, o tamanho de uma fonte é diferente em um Notebook e em um Tablet, que é diferente em um celular. Para mostrar isso na pratica, vamos criar uma div chamada "alturaFixa", que tem 100 pixels de height e 100 pixels de width,

O código HTML da  div é:

<div class="alturaFixa">
 Curso HTML Progressivo <br />
 Apostila online de HTML, HTML5 e CSS <br/>
</div>

Vamos estilizar ela da seguinte maneira em nossa folha CSS:

.alturaFixa{
 width: 100px;
 height: 100px;
 border: solid;
}

O resultado será:

Curso HTML Progressivo
Apostila online de HTML, HTML5 e CSS

Aqui, o texto coube perfeitamente dentro do bloco, nem mais nem menos espaço.
Veja na figura:

Agora vamos apertar "control +", para aumentar o tamanho da fonte (testado no Google Chrome), o resultado é este:

Aí está o motivo de não ser uma boa ideia definir largura e altura para alguns elementos, como texto, pois você não tem controle do tamanho da fonte do usuário, que sistema operacional ele usa, se vai mudar algo (como apertar "control" e "+").
Porém, se você definir somente a largura (width), a altura será variável, vai mudar de tamanho em cada dispositivo, para caber tudo que tem dentro.

Já em imagens tratadas em CSS, é comum definirmos altura e largura, pois sabemos a largura e altura exata da figura. Em todos os casos, teste sempre.
Webmasters profissionais testam seus sites em diversos navegadores, sistemas operacionais e dispositivos, tentando deixar o layout do site sempre adaptado (o que raramente é possível, principalmente para o navegador Internet Explorer).