Usar o width e height em CSS
Width e Height
O width e height é bastante usado em CSS, e traz bastantes 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 centímetros
- Pontos: é usado em CSS2 são iguais a 1/72 de uma inch
- Picas: 1 pica é igual a 12 pontos
- Milímetros
- 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.
Podemos também 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 ecrã inteiro ou está apenas a utilizar metade do ecrã é considerado sempre 100%.
Usando apenas uma parte:
Quando usamos os valores em percentagens, o elemento apenas usará a percentagem disponível no ecrã.
<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>
Neste exemplo experimenta-mos modificar o tamanho da janela para veres que o elemento usa sempre 50% do espaço disponível.
Height
O height é usado da mesma forma que o width a diferença é que, específicas 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 width 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 dá uma vantagem de criar layouts ‘elásticos’ que se modificam através do tamanho disponível do ecrã.
Usar valores fixos tem a vantagem de controlares melhor o layout e saberes sempre que tudo encaixa perfeitamente.
Sobre o autor
2 Respostas sobre Usar o width e height em CSS
-
-
Obrigado, não tem problema. Espero ter ajudado.
-
Dezembro 4, 2010
Exelente cara, tao simples, mas na hora de montar um site se faltar esse detalhe nao fica um site bom.
valeu.