Montagem da página HTML - Renderização dos elementos
Seguindo o formato de exibição de textos antigos, os elementos de uma página HTML são exibidos como se fossem textos, ou seja, de cima para baixo e da esquerda para a direita e numa 'linha' ou 'parágrafo' que coordena ou alinha esses elementos.
Portanto se o objeto a esquerda é alto e o da direita baixo vai ficar um espaço vazio no segundo elemento.
Como os novos elementos são bem mais complexos que um simples texto foi criado o contexto de boxing.
BOXING é como cada elemento da página web é exibido e como diz o nome, é uma caixa
.
Como um elemento é exibido no browser.
Todo elemento é exibido no browser como uma caixa (Box) da seguinte maneira:
Este 'espaçamento/modo/modelo' foi definido como sendo a melhor maneira de exibir um objeto nos mais amplos contextos.
O primeiro item não pertence em si ao elemento mas é sim um espaçamento, uma margem para que um elemento não encoste em outro elemento. É um espaçamento para que um elemento não 'encoste' no outro elemento logo a seguir, anterior, superior ou inferior. Note que até aqui nosso elemento nem começou a ser renderizado (exibido) ainda, só estamos tentando 'encaixar' ele dentro da página HTML.
Note que o elemento margem sempre existe no elemento mas nem sempre é exibido porque podemos definir com uma espessura de zero pixels ou com uma cor de fundo igual ao da página ai ela seria exibida mas não seria notada pelo usuário.
A margem como a maioria dos elementos do box pode ser definida como sendo :
•As 4 margens iguais (ex: margin:10px;).
•A margem superior e inferior com uma dimensão e a lateral esquerda e direita com outra ( margin:10 px 5 px ).
•Definindo as 4 margens diferentes ( topo, lateral direita, inferior, lateral esquerda -
Ex: margin:10px 15px 20px 25px)
Também no estilo da CSS podemos definir apenas uma das margens, por exemplo, margin-top:10px;. Neste caso as demais ficariam com 0px que é o default do browser. Ainda podemos definir margin-left, margin-bottom, margin-right da mesma maneira.
A margem é útil em certas situações separando os elementos da página ( como textos ) mas em certas ocasiões
ele deixa um espaço indesejado como quando entre imagens e outros itens que devem ser exibidos colados.
Só mesmo vendo como fica na página para ver se o elemento fica melhor com ou sem a margem.
A seguir cito um exemplo prático de utilização da margem.
Como usar :
<span style="border:1px solid red">Primeiro elemento</span><span style="border:1px solid green">Segundo elemento</span>
Como o browser exibe:
Primeiro elementoSegundo elemento
Agora os mesmos dois elementos html COM margem de 10 pixels : Para destacar colocarei a borda vermelha e verde.
Como usar :
<span style="border:1px solid red;margin:10px;">Primeiro elemento</span><span style="border:1px solid green;margin:10px;">Segundo elemento</span>
Como o browser exibe:
Primeiro elementoSegundo elemento
Importante : No style quando defino o parâmetro margin eu estou definindo todas as margens.
Contudo existe a margem superior(margin-top), inferior(margin-bottom), margem direita (margin-right) e margem esquerda (margin-left). Podemos definir as margens independentemente uma da outra.
Por exemplo, num menu as margens inferiores são praticamente obrigatórias.
A seguir vem a borda que é um componente delineador que visa ornar, destacar o elemento na página, separando a parte externa do conteúdo do núcleo do elemento a ser exibido. É um recurso visual ou estético. Mostra claramente, se quisermos, o quanto o objeto ocupa no documento.
Novamente precisamos ver se a borda é bem vinda ou não...as vezes é boa para destacar mas as vezes faz o site parecer grosseiro, pré=histórico ao usar o recurso.
No exemplo acima usei a borda. Mas ela pode ser grossa, pontilhada, etc...da maneira que você desejar.
Vamos desenhar um elemento com a borda de 5 pixels, tracejado e na cor vermelha para destacar.
Como usar :
<span style="border:5px dashed red">Elemento com 5 pixels de borda tracejada e vermelha</span>
Como o browser exibe:
Elemento com 5 pixels de borda tracejada e vermelha
A seguir o Padding que é um elemento espaçador e define um o espaçamento interno para que o conteúdo real do elemento não 'encoste' na borda dando um visual mais agradável. Com certeza é um componente ornamental. Por exemplo, cito um texto. Muitas vezes queremos um fundo de uma cor e se o texto se ele tocar na margem fica feio pois fica com um fundo em outras margens(topo, esquerda, direita, baixo) e ao 'tocar' na margem ele não exibirá o fundo. O padding dá um espaçamento e visualmente fica muito melhor a menos que você precise exibir bastante coisa e cada uma precisar ocupar o mínimo espaço possível.
No exemplo acima a borda ficou feia e um dos problemas foi que o texto 'tocava' a margem.
Com o padding, esse efeito é corrigido.
Como usar :
<span style="border:5px dashed red;padding:5px;">Elemento com 5 pixels de borda tracejada e vermelha</span>
Como o browser exibe:
Elemento com 5 pixels de borda tracejada e vermelha
Note que a margem(Margin), Padding e a borda (Border) podem ser formatados da maneira que desejarmos e até podem ser ocultados se o objeto a ser exibido não precisar deles. O único elmemento obrigatório é o conteúdo.
Finalmente o elemento mais interno do box é o Conteúdo que é o que desejamos exibir realmente. Pode ser texto, imagem, vídeo som etc.
animação.O padrão HTML é elaborado por um conjunto de empresas que participam do WW3 consortium. Neste padrão foi definido quais são os defaults de Margem, Padding, Border para cada tag HTML.
Podemos dizer que muitas vezes esses elementos sequer são exibidos ( por exemplo, um border com zero pixel, uma margem com cor = fundo, etc.) mas todo elemento html tem esses itens.
Muitas vezes alguns desses atributos 'default' não estão de acordo com o que desejamos no design da nossa página.
Houve ocasiões em que eu precisei enviar infos para o server e para isto a informação precisava estar dentro de um textbox que era exibido ao usuário mas não queira que ele se parecesse com os outros porque não podiam ser editados, eram só para visualização e estavam desabilitados. Para isto formatei os textbox de maneira que fossem exibidos como texto comum. Você verá isso em CSS mas abaixo menciono como fazer isso.
É o caso do body no HMTL5 onde precisamos formatar o margin e o padding para zero se quisermos que um elemento encoste no outro dentro do body senão vai ficar uma linha branca de espaço que nem sempre agrada visualmente.
Abaixo cito um exemplo de como formatar um input type text de maneira que pareça um texto.
Como usar :
Temos aqui um texto simples e a seguir temos um input type text : <input type="text" value="Conteudo do input type text" />
Como o browser exibe:
Temos aqui um texto simples e a seguir temos um input type text :
Alterando o estilo como o input type text é exibido.
Como usar :
Temos aqui um texto simples e a seguir temos um input type text : <input style="border:none;color:black;" type="text" value="Conteudo do input type text" disabled="disabled" />
Como o browser exibe:
Temos aqui um texto simples e a seguir temos um input type text :
Box Sizing - Tópico Avançado - Pertence a CSS
Como vimos acima todos elementos HTML são exibidos dentro de um 'BOX' que tem margem, borda, padding e a largura/altura do conteúdo.
Mas se eu definir, por exemplo, uma div com um padding ou borda e outra sem elas serão exibidas com o mesmo tamanho no browser ?.
A resposta, por default é NÃO, elas terão tamanho diferentes e isto traz problemas no alinhamento dos itens.
Nota : Se você não define o padding de um elemento o browser define esse padding default como 1px normalmente.
box-sizing
Box sizing é um recurso da CSS que informa ao browser se deve contabilizar ou não na dimensão do objeto o
padding, borda, margem do elemento.
Para cobrir todas as possibilidades o box-sizing tem 3 tipos:
box-sizing:content-box
Este é o padrão.
As propriedades width (largura) e height (altura) são contabilizadas
mas padding, borda e margem não são levados em conta.
Exemplo.: Se num .box de width: 200px você aplicar uma propriedade padding:10px solid black; o resultado renderizado no navegador (browser) será .box {width: 220px;}
box-sizing:padding-box
A largura (width), altura (height), padding são incluidos
mas, não incluem borda ou margem.
Cuidado: A maioria dos browsers atuais ainda não aceitam este padrão.
box-sizing:border-box
A largura (width), altura (height), padding e a borda são incluidos, mas não a margem.
Resumo segundo os sites de referência
| box-sizing | Padding | Borda | Margem |
|---|---|---|---|
| content-box | |||
| padding-box | X | ||
| border-box | X | X |
Testes com padding
Nota : Testei com uma imagem de 37px no lugar do texto Divx e obtive exatamente o mesmo resultado.
Teste 1 : Default (sem definição de box-sizing)
Nesta primeira experiencia vamos criar uma div sem padding e outra com padding.
Vamos ver se o browser contabiliza ou não o padding (10px) na dimensão do elemento.
Agora vá no depurador do browser (F12) e clique em
- Dimensão dos objetos
No depurador vemos que da Div1 e a Div2 continuam com 100px cada o que significa que o padding de 10px foi contabilizado e por esse motivo não alterou o tamanho da div.
Teste 2 : Default contra box-sizing:content-box
Nesta segunda experiência vamos criar uma div com padding mas usando o default do browser e vamos criar uma segunda div usando box-sizing:content-box.
No depurador vemos que da Div3 ficou com 100px por 100px enquanto a Div4 ficou com 122px por 122px significando que o box-sizing:content-box não contou o padding, ou seja, alterou o tamanho da div ao definirmos um padding.
Teste 3 : Default contra box-sizing:border-box
Nesta terceira experiência vamos criar uma div com padding mas usando o default do browser e vamos criar uma segunda div usando box-sizing:border-box.
No depurador vemos que da Div5 e a Div6 continuam com 100px cada o que significa que o padding de 10px foi contabilizado e por esse motivo não alterou o tamanho da div. Portanto o box-sizing:border-box contabiliza o padding (não altera o tamanho do objeto quando definimos o padding).
Teste 4 : Default contra box-sizing:padding-box
Nesta quarta experiência vamos criar uma div com padding mas usando o default do browser e vamos criar uma segunda div usando box-sizing:padding-box.
No depurador vemos que da Div7 e a Div8 continuam com 100px cada o que significa que o padding de 10px foi contabilizado e por esse motivo não alterou o tamanho da div. Portanto o box-sizing:padding-box contabiliza o padding (não altera o tamanho do objeto quando definimos o padding).
Resumo box-sizing: Só content-box não levou padding em conta.
Testes com a borda
Teste 5 : Default (sem definição de box-sizing)
Nesta quinta experiencia vamos criar uma div com borda de 1px e outra com borda de 5px.
Vamos ver se o browser contabiliza a borda na dimensão do elemento.
No depurador vemos que da Div9 e a Div10 continuam com 100px cada o que significa que a borda de 5px foi contabilizado e por esse motivo não alterou o tamanho da div.
Teste 6 : Default contra box-sizing:content-box
Nesta sexta experiência vamos criar uma div com borda mas usando o default do browser e vamos criar uma segunda div usando box-sizing:content-box.
No depurador vemos que da Div11 ficou com 100px por 100px enquanto a Div12 ficou com 112px por 112px significando que o box-sizing:content-box não contou o border, ou seja, alterou o tamanho da div ao definirmos uma borda.
Teste 7 : Default contra box-sizing:border-box
Nesta sétima experiência vamos criar uma div com borda de 1px mas usando o default do browser e vamos criar uma segunda div com 5px usando box-sizing:border-box.
No depurador vemos que da Div13 e a Div14 continuam com 100px cada o que significa que a margem de 5px foi contabilizado e por esse motivo não alterou o tamanho da div. Portanto o box-sizing:border-box contabiliza a borda (não altera o tamanho do objeto quando definimos o padding).
Teste 8 : Default contra box-sizing:padding-box
Nesta oitava experiência vamos criar uma div com uma borda de 1px usando o default do browser e vamos criar uma segunda div com 5 px de borda e usando box-sizing:padding-box.
No depurador vemos que da Div15 e a Div16 continuam com 100px cada o que significa que a margem de 5px foi contabilizado e por esse motivo não alterou o tamanho da div. Portanto o box-sizing:padding-box contabiliza a margem (não altera o tamanho do objeto quando definimos o padding).
Resumo box-sizing: Só content-box não levou padding em conta.
Resumo dos resultados obtidos do Padding e Bordas
| box-sizing | Padding | Borda | Margem |
|---|---|---|---|
| content-box | |||
| padding-box | X | X | |
| order-box | X | X |
Testes com a margem
Por definição nenhum dos boxes sizes contabiliza a margem e isto provavelmente deve-se ao fato que margem não pertence ao elemento mas sim é um separador externo do elemento.
Abaixo defino diversas divs todas com 5 px de margem mas box-sizing diferentes
Resumo box-sizing: Só content-box alterou o tamanho da div de 100px por 100px para 104px para 104px por causa da margem.
Resumo dos resultados obtidos de Padding, Bordas e Margem
| box-sizing | Padding | Borda | Margem |
|---|---|---|---|
| content-box | |||
| padding-box | X | X | |
| order-box | X | X |
Nota : Só no content-box o tamanho do box foi alterado por causa da margem, ou seja, o content-box
não levou em conta a margem e isto acrescentou no tamanho do objeto.
Não foi o que os sites de referência afirmaram mas os resultados são empiricamente indiscutíveis.