PTTutoriais

Usar o width e height em CSS

Aug 23, 2008 CSS

Width e Height

Width e Height é bastante usado em CSS, e traz bastante vantagens na construção de layouts para a web.

Width

O width define a largura de um elemento em HTML, e pode tomar valores em pixeis, percentagens, inches, centímetros, milímetros, pontos, e picas.

• Inches: 1 inch é igual a 2.54 centimetros
• Pontos: é usado em CSS2 sao iguais a 1/72 de uma inch
• Picas: 1 pica é igual a 12 pontos
• Melimitros
• Centímetros

Como usar o widht

Usando o width no elemento <p>

<p style="width: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Como podemos ver o texto fica contido, assim que chegar aos 200px o restante texto muda de linha.
Também podemos usar os valores em percentagens, sendo assim o bloco irá ocupar uma percentagem disponível na janela do browser.

Por exemplo quando a janela do browser está á utilizar o écran inteiro ou está apenas a utilizar metade do écran é considerado sempre 100%.

Usando apenas uma parte

Quando usamos os valores em percentagens, o elemento apenas usara a percentagem disponível no écran.

<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Neste exemplo experimenta modificar o tamanho da janela para veres que o elemento usa sempre 50% do espaço disponível.

Height

O height é usado da mesma maneira que o width a diferença é que especificas a altura do elemento.

<p style="height: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque posuere dignissim. Donec mattis.

Como podemos ver o próximo paragrafo só começa 200px depois.

O height também pode ser usado com percentagem e tem o mesmo efeito que o width.

Conclusão

Este tutorial serve apenas para ver como usar e os resultados do widht e height em CSS.

Neste exemplo apenas usamos o elemento <p> mas o width e o height pode ser usado praticamente em todos os elementos de HTML.

Usar valores em percentagem da uma vantagem de criar layouts ‘elásticos’ que se modificam através do tamanho disponível do écran.

Usar valores fixos tem a vantagem de controlares melhor o layout e saberes sempre que tudo encaixa perfeitamente.