0

Viva,

Ando com umas dúvidas acerca de alguns conceitos. Ando a baralhar um pouco cada um destes conceitos.

Caixa: Por exemplo, se criar uma class num texto consigo dar-lhe uma largura e altura com o padding. Mas, também consigo posiciona-lo na página com o margin.

Então se consigo dizer que quero aquele elemento mais à direita porquê que vou usar float: right? Se consigo fazer isso com o margin-left.

Outra dúvida é acerca do width e altura. Quando os usar? Uma vez mais faço tudo o que ele faz com a propriedade de caixa. Posso usar o padding. Não é mesmo?

Um caso prático: Imaginem que tenho a navegação do site (quem somos, noticias, etc) e eu quero meter abiaxo na navegação uma caixa com texto e imagem. Como faço?

Teoricamente posso fazer tudo com o conceito de caixa. Para dizer a distância que quero do elemento de cima uso o margin. O tamanho da caixa uso o padding.

Por outro lado tinha a ideia que o width é utilizado para dividir as partes do site. Ou seja, se o que estou a criar em baixo da navegação é sobre cães e o abaixo a ele é gatos então crio 2 width um para cada um deles. Mas então porquê que não posso fazer tudo com o conceito da caixa?

E onde se insere aqui o posicionamento? Se posso posicionar tudo com as caixas - margin, padding...

Tenho a certeza que esta minha confusão é a de muitos que se estão a inicializar. Já li várias coisas mas nenhuma confronta estes conceitos diretamente. Então fico sempre na dúvida.

Atenção: A minha dúvida não esta no que fazem os elementos ou propriedades mas sim como os usar.

2 Respostas 2

4

Sua pergunta esá bastante confusa e de certa forma até ampla demais, mas acredito que posso responder.

Não posso lhe dar um veredito sobre usar float ou margin para posicionar elementos mas usar float traz como principal benefício o fato de permitir que os elementos de bloco não se empilhem uns aos outros ficando, literalmente, flutuando.

Isso foi um dos mais importantes (se não o maior) dos motivos pelo qual a migração dos layouts baseados em tabelas para Tableless foi possível pois graças ao float era possível simular colunamento para dispor os elementos.

Posicionar elementos com margin não é errado, afinal sem margens não seria possível ter precisão de posicionamento ou proporcionar um apelo estético melhorado, como desgrudar um layout das bordas da tela.

Quanto a questão do padding você está confundindo altura real com altura residual.

Altura real de um elemento é aquela que voc~e define manualmente através da propriedade height ou o comportamento padrão de um elemento de bloco de acompanhar o texto verticalmente.

Altura residual é aquela que você vê e assume ser a altura de um elemento quando o vê.

Por exemplo: Dado um elemento de bloco de 10cm de altura (height) com 5cm de espaçamento interno (padding). O elemento tem uma altura real de 10cm, mas você vê um elemento de 20cm por causa da altura composta computada pelo box-model

Não estou dizendo que criar altura com padding seja errado. É um workaround válido principalmente para elementos de linha, os quais não são afetados pelas propriedades width e height.

O que realmente vai lhe ajudar é uma tradução adaptada do link postado pelo @vrcca com alguns complementos de fontes externas.


Como os elementos são exibidos?

Antes de falar sobre o box model ajuda a entender como os elementos são exibidos.

Elementos de bloco iniciam sempre numa nova linha, sendo empilhados uns sobre os outros e ocupam qualquer largura disponível. Eles podem se aninhar uns dentro dos outros e podem envolver elementos de linha (inline) e são normalmente utilizados como delimitadores de grandes áreas ou conteúdos, como parágrafos.

Elementos de linha não começam em novas linhas, eles seguem o fluxo normal do documento, se alinhando uns depois dos outros e mantém apenas a largura necessária para seus conteúdos. Esses elementos também podem se aninhar uns dentro dos outros e até mesmo envolver outros elementos desde que não sejam elementos de bloco. Eles são usados para delimitar pequenas áreas de conteúdo, como palvras ou links.

A exibição dos elementos, sejam eles de bloco, de linha ou qualquer outra coisa é determinado pela propriedade display. Todo elemento tem um valor pré-definido para essa propriedade e como qualquer propriedade, este pode ser sobrescrito.

Existe uma certa quantidade de valores possíveis, mas os mais comuns são block, inline, inline-block e none.

Destes o mais interessante é o inline-block que faz com que o elemento se comporte como um elemento de bloco ao mesmo tempo que se alinha com outros elementos, sem empilhar ou inciar em novas linhas.

Box Model

Todo elemento HTML pode ser considerado uma caixa que envolve os elementos HTML formado por margens, bordas, espaçamento e o conteúdo em si, podendo ainda ter largura e altura próprios.

Ilustrativamente, temos:

css box model

  • Margens (margin): Área totalmente transparente que limpa a área ao redor da borda
  • Border (borda): Área em volta do conteúdo e seu espaçamento interno (padding)
  • espaçamento (padding): Área com ou sem cor que limpa a área ao redor do conteúdo
  • Conteúdo (content*): O conteúdo em si, com textos, imagens e afins.

Trabalhando com box-model

O mais básico dos princípios do box-model gira em torno da largura e da altura dos elementos que podem ser determinados pela propriedade display, pelo conteúdo do elemento ou quando deinfinindo manualmente a largura (width) e altura (height) no CSS.

Vamos a um pouco de código:

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

E um auxílio visual:

box-model
(fonte: shayhowe.com)

As dimensões totais do elemento, de acordo com o box-model é definida da seguinte forma:

  • Largura margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

  • Altura margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

No nosso exemplo, nosso elemento teria 492px de largura por 192px de altura.

E é por isso que o box-model pode ser considerado uma das partes mais confusas do CSS pois nós explicitamos ao nosso elemento que ele tivesse 400px de largura, mas por causa de toda customização ele acabou tendo 492px de largura.

Largura e Altura

Todo elemento tem uma largura e uma altura. Todo browser vai renderizar os elementos com alguma dimensão. Dependendo a forma como um elemento é exibido (display) os valores-padrão são suficientes mas, caso o elemento seja importante para alguma definição específica, as prorpiedades precisarão ser definidas.

Elementos de bloco tem uma largura de 100% consumindo todo espaço horizontal disponível. Já os elementos de linha ou àqueles definidos como inline-block se expandem ou se contraem para acomodar o conteúdo.

Por não possuirem tamanho fixo, elementos de linha, não são afetados pelas propriedades width e height

A altura dos elementos é definida pelos seus conteúdos, se expandindo ou se contraindo verticalmente para acomodá-los.

Margem e Esaçamento

Dependendo do elemento, os browsers podem aplicar regras próprias de margin e padding o que torna praticamente impossível trabalhar com box-model. Por isso que é vital o uso de um CSS Reset. O mais popular é o do Eric Meyer.

Programadores de front-end mais puritanos dirão que:

* { margin: 0; padding: 0; }

É suficiente mas eu discordo. Tudo bem que hoje em dia não se usam muitas das tags cobertas por essse CSS Reset e que todo byte poupado conta, mas eu vejo esse como um mal necessário.

Como dito margin define o espaço invisível ao redor de um elemento e servem para um posicionamento específico e preciso de um elemento na página.

Margens verticais (top e bottom) não são aceitas por elementos de linha, apenas por elementos de bloco.

E o padding é o espaçamento interno de um elemento. opostamente ao margin, padding pode ter cor de fundo, se o elemento onde tiver sido definido possuir um background definido.

Ao contrário de margin, o espaçamento vertical provido por padding funciona em elementos de linha, mas é preciso notar que, em excesso, pode causar uma sobreposição indevida em elementos acima ou abaixo.

Bordas

As bordas existem entre o margin e o padding e permitem delinear o contorno de um elemento e requerem uma largura, um estilo e uma cor para serem definidas.

Podem existir em caixa, isto é, nos quatro lados do elemento ou individualmente, através de propriedades específicas.

Box-sizing

Como visto, o box-model é um modelo aditivo, o que faz com a largura e altura totais de um elemento sejam formadas pela soma desses valores, sejam eles explícitos ou padrão (dos browsers) com margens, espaçamentos e bordas.

O CSS3 introduziu a propriedade box-sizing que permite que o box-model seja calculado de formas diferentes. Essa propriedade aceita três possíveis valores:

  • content-box É o valor padrão que mantém o box-model no modelo aditivo

  • padding-box Quando esse valor é definido qualquer padding definido ao elemento não é acrescido à sua altura e largura. Bordas e margens, porém, continuarão sendo acrescidas.

  • border-box

  • Essa opção complementa o padding-box pois além de virtualmente ignorar qualquer padding dado ao elemento também não acrescento à largura e altura totais os valores de quaisquer possíveis bordas definidas.

Como visto, não importa como definiamos o box-sizing as margens sempre continuarão a ser levadas em consideração nos cálculos totais.

Pessoalmente, o border-box é aquele recurso que todos nós sonhávamos em ter não só porque torna a matemática feita muito mais simples e fácil e de se entender, mas porque permite um controle muito mais eficaz quando trabalhando com unidades relativas.

Mas, como nem tudo são flores, ainda não é um recurso suportado por todos os browser e mesmo para os que suportam ainda exige a tríade de propriedades prefixadas por -webkit- (Chrome e safari), -moz- (Firefox) e até mesmo -ms- (Internet Explorer)-

Fontes:

2
  • oLÁ bRUNO, agradeço a postagem do artigo. Na verdade não veio acrescentar muito. Já sabia do que li. O meu problema não é entender o que fazem mas sim como os usar. obrigado.
    – David
    Commented 30/07/2014 às 15:40
  • Da redação do seu post eu pude abstrair pelo menos duas questões, ambas respondidas ou no mínimo bem comentadas antes da porção maior de texto (tem uma linha cinza bem sutil dividindo). Leia novamente e você vai ver que eu cito situações específicas para margin, padding e float. Commented 30/07/2014 às 16:07
1

Esse cara aqui se esforçou bastante pra tentar tirar todas as dúvidas sobre o Box Model (em inglês) e creio que possa te ajudar:

http://learn.shayhowe.com/html-css/opening-the-box-model/

1
  • Traduzi a parte mais essencial do link que você passou. Obrigado. Commented 30/07/2014 às 16:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .