Altura e largura do elemento são valores calculados. Cada elemento de uma página da web forma uma área retangular, que por sua vez consiste em várias áreas - área de conteúdo (conteúdo), áreas de enchimento, áreas do quadro e áreas de campo elemento.
Entre o conteúdo do elemento e sua borda estão recuo preenchimento, fora da borda do elemento - Campos margem. Cada elemento possui uma área de conteúdo, outras áreas são opcionais.
Arroz. 1. Modelo de bloco de um elemento 1. Altura do elemento
A propriedade height define a altura do conteúdo do elemento do bloco e não tem efeito na exibição dos elementos inline: inline; ... A altura dos elementos embutidos é igual à altura de seu conteúdo. Valores negativos não são permitidos. A propriedade não é herdada.
Sintaxe
P (altura: 100px;)
2. Largura do item
A propriedade width define a largura do conteúdo do elemento do bloco e não tem efeito na exibição dos elementos inline: inline; ... Os elementos embutidos têm a mesma largura de seu conteúdo. Valores negativos não são permitidos. A propriedade não é herdada.
Sintaxe
P (largura: 100px;)
3. Altura e largura de um elemento posicionado absolutamente
Defina a largura e a altura de uma posição de elemento posicionado absolutamente: absoluto; nem sempre é necessário, pois neste caso a altura e a largura são implicitamente determinadas pelo deslocamento do elemento. Se bordas e margens forem especificadas para um elemento, elas reduzem o tamanho da área de conteúdo pelos valores apropriados.
Div (fundo: # 6A7690; posição: absoluta; superior: 0; inferior: 0; esquerda: 50%; direita: 0;) / * neste caso, a altura do elemento é 100%, a largura é 50% do bloco pai * / 
Arroz. 2. Altura e largura de um elemento posicionado absolutamente
4. Recuos de elemento
Usando a propriedade padding, você pode definir o preenchimento para vários lados de um elemento ao mesmo tempo na seguinte ordem :. Se o elemento tiver um plano de fundo, ele se estenderá ao preenchimento também. Valores negativos não são permitidos. A propriedade não é herdada.
Se três valores forem fornecidos, por exemplo, div (padding: 10px 20px 30px;), eles serão distribuídos na seguinte ordem: o primeiro valor é o preenchimento superior, o segundo é o preenchimento direito e esquerdo e o o terceiro é o preenchimento inferior.
Se dois valores forem fornecidos, por exemplo, div (padding: 10px 20px;), o primeiro definirá o espaçamento superior e inferior, o segundo definirá o espaçamento direito e esquerdo.
Um único valor, por exemplo div (padding: 10px;), definirá o mesmo preenchimento em todos os lados do elemento.
Sintaxe
P (preenchimento: 5px 10px 15px 10px;)
4.1. Recuando um lado de um elemento
Para definir o preenchimento em apenas um lado de um elemento, você precisa usar uma das propriedades padding-top, padding-right, padding-bottom, padding-left, por exemplo:
P (padding-left: 10px;)
5. Campos de elemento
A maioria dos elementos são separados uns dos outros por margens. A propriedade margin é uma forma abreviada para escrever as margens de um elemento na seguinte ordem: superior, direita, inferior, esquerda... É usado quando você precisa especificar as margens de vários lados, mas não necessariamente dos quatro lados. As margens verticalmente adjacentes dos elementos do bloco são reduzidas e as margens superior e inferior não têm efeito nos elementos embutidos. Valores negativos são permitidos. A propriedade não é herdada.
Se três valores forem fornecidos, por exemplo, div (margin: 10px 20px 30px;), eles serão distribuídos na seguinte ordem: o primeiro valor é a margem superior, o segundo é a margem direita e esquerda e o o terceiro é a margem inferior.
Se dois valores forem fornecidos, por exemplo, div (margin: 10px 20px;), o primeiro definirá as margens superior e inferior e o segundo definirá as margens direita e esquerda.
Um único valor como div (margin: 10px;) definirá as mesmas margens em todos os lados do elemento.
(margin: 0 auto;) só funcionará se a largura do elemento for definida explicitamente.
Arroz. 3. margem: automático; para elemento posicionado absolutamente Sintaxe
Div (margem: 5px 10px 2px 5px;)
5.1. Margens de um lado do elemento
As propriedades margin-top, margin-right, margin-bottom, margin-left controlam as margens correspondentes em cada lado do elemento, por exemplo:
P (margem esquerda: 10px;)
6. Limitando largura e altura
CSS também oferece suporte a algumas outras propriedades relacionadas à configuração da altura e largura dos elementos da página da web: min-height, min-width, max-height e max-width. Essas propriedades permitem definir os valores mínimo e máximo para a largura ou altura de um elemento, dando ao elemento a capacidade de preencher o espaço disponível. As propriedades são frequentemente usadas para design de página da Web responsivo. Aplica-se a todos os elementos, exceto elementos inline e de tabela. Eles sempre seguem a regra principal, ou seja, depois de dar ao elemento uma altura ou largura. Não herdado.
Você pode definir dimensões regulares usando algumas unidades de medida e restrições de tamanho usando outras unidades, por exemplo:
Div (largura: 400 px; largura máxima: 50%;)
O elemento terá 400px de largura apenas se este valor não exceder 50% da largura do bloco de contêiner, caso contrário, sua largura será reduzida.
Neste artigo, vamos dar uma olhada em como você pode definir a altura de um bloco como uma porcentagem de sua largura em CSS. Vejamos a aplicação dessa tecnologia usando o exemplo de criação de um carrossel Bootstrap (controle deslizante) a partir de imagens de diferentes tamanhos.
Criação de um bloco com uma altura que tem uma certa porcentagem de sua largura
- Crie uma estrutura HTML a partir de 2 blocos:
O primeiro bloco possui 2 classes. Usando a classe responsiva ao item, definiremos o posicionamento relativo do bloco. Isso deve ser feito para que o bloco 2 (que terá posicionamento absoluto) esteja localizado em relação a ele. Além disso, essa classe também é usada para adicionar o pseudo-elemento: before antes do conteúdo dos elementos correspondentes (responsivo ao item). Este elemento irá definir a altura desejada da caixa em relação à sua largura usando a propriedade CSS padding-top. O truque desse método é que, se a propriedade padding for definida como não em pixels, mas em porcentagens, então será calculado pelo navegador em relação à sua largura... Assim, é possível obter um bloco com a altura desejada. O próximo passo é dar ao bloco 2 um posicionamento absoluto e alinhá-lo com o primeiro bloco.
- Adicione o seguinte CSS à página: .item-responsive (position: relative; / * posicionamento relativo * /) .item-responsive: before (display: block; / * renderizar o elemento como um bloco * / content: ""; / * pseudoelemento de conteúdo * / largura: 100%; / * largura do elemento * /) .item-16by9 (preenchimento superior: 56,25%; / * (9:16) * 100% * /) .item-responsivo> .content (position: absoluto; / * posição absoluta do elemento * / / * posição do elemento * / top: 0; left: 0; right: 0; bottom: 0;) / * Se necessário (para blocos com estes classes) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .item -1by1 (padding-top: 100%; / * (1: 1) * 100% * /)
Aplicando a tecnologia acima para criar um carrossel Bootstrap
Se você não está familiarizado com o Bootstrap e deseja saber o que é, consulte nossa Introdução ao Bootstrap.
Vejamos um exemplo em que a estrutura HTML acima e o código CSS serão usados para exibir os slides do carrossel do Bootstrap.
Usaremos os seguintes arquivos como imagens:
- carousel_1.jpg (largura = 736px, altura = 552px, proporção (altura x largura) = 1,33);
- carrossel_2.jpg (largura = 1155 px, altura = 1280 px, proporção (altura para largura) = 0,9);
- carousel_3.jpg (largura = 1846 px, altura = 1028 px, proporção (altura para largura) = 1,8);
- carousel_4.jpg (largura = 1140px, altura = 550px, proporção (altura para largura) = 2,07);
- carousel_5.jpg (largura = 800px, altura = 600px, proporção (altura para largura) = 1,33);
Vamos definir as imagens como plano de fundo. Isso permitirá que imagens com diferentes proporções sejam usadas no carrossel Bootstrap 3.
Marcação HTML do carrossel:
Código CSS do carrossel:
Responsivo ao item (posição: relativo; / * posicionamento relativo * /). Responsivo ao item: before (display: block; / * renderizar elemento como bloco * / content: ""; / * conteúdo do pseudoelemento * / largura: 100 %; / * largura do elemento * /) .item-16by9 (preenchimento superior: 56,25%; / * (9:16) * 100% * /) .item-responsive> .content (posição: absoluto; / * posição absoluta do elemento * / / * posição do elemento * / superior: 0; esquerda: 0; direita: 0; inferior: 0; tamanho do fundo: capa! importante;)
Por padrão, autowidth é usado para elementos de bloco. Isso significa que o elemento será esticado horizontalmente exatamente na quantidade de espaço livre disponível. A altura padrão dos elementos do bloco é definida automaticamente, ou seja, o navegador estende a área de conteúdo verticalmente para exibir todo o conteúdo. Para definir dimensões personalizadas para a área de conteúdo de um elemento, você pode usar as propriedades de largura e altura.
A propriedade CSS width permite que você defina a largura da área de conteúdo de um elemento, e a propriedade height permite que você defina a altura da área de conteúdo:
Observe que as propriedades de largura e altura determinam apenas o tamanho da área de conteúdo; para calcular a largura total de um elemento de bloco, adicione a largura da área de conteúdo, o preenchimento esquerdo e direito e a largura das bordas esquerda e direita. O mesmo vale para a altura total do elemento, apenas todos os valores são calculados verticalmente:
Para este parágrafo, definiremos apenas a largura e a altura.
Este parágrafo contém, além da largura e altura, preenchimento, borda e preenchimento.
Experimente "O exemplo mostra claramente que o segundo elemento ocupa mais espaço do que o primeiro. Se você calcular de acordo com nossa fórmula, as dimensões do primeiro parágrafo são 150x100 pixels e as dimensões do segundo parágrafo são:
| Altura Geral: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
| superior quadro | superior recuar | altura | diminuir recuar | fundo quadro |
ou seja, 180x130 pixels.
Transbordamento de elementos
Depois de definir a largura e a altura do elemento, vale a pena prestar atenção a um ponto importante - o conteúdo localizado dentro do elemento pode exceder o tamanho do bloco especificado. Nesse caso, parte do conteúdo irá além das bordas do elemento, para evitar esse momento desagradável, pode-se usar a propriedade overflow do CSS. A propriedade overflow informa ao navegador o que fazer se o conteúdo do bloco exceder seu tamanho. Essa propriedade pode assumir um de quatro valores:
- visível é o valor padrão usado pelo navegador. Definir esse valor terá o mesmo efeito que não definir a propriedade overflow.
- scroll - adiciona barras de rolagem verticais e horizontais ao elemento.
- auto - adiciona barras de rolagem conforme necessário.
- oculto - oculta parte do conteúdo que vai além dos limites do elemento de bloco.
Descrição
Define a altura do bloco ou dos elementos substituíveis (por exemplo, a tag ) A altura não inclui a espessura das bordas ao redor do elemento, o valor do preenchimento e das margens.
Se o conteúdo do bloco exceder a altura especificada, a altura do elemento permanecerá inalterada e o conteúdo será exibido em cima dele. Esse recurso pode fazer com que o conteúdo dos elementos se sobreponha quando os elementos no código HTML são sequenciais. Para evitar que isso aconteça, adicione overflow: auto ao estilo do elemento.
Sintaxe
altura: valor | interesse | auto | herdar
Os valores
Quaisquer unidades de comprimento aceitas em CSS são aceitas como valores - por exemplo, pixels (px), polegadas (in), pontos (pt), etc. Ao usar a notação de porcentagem, a altura de um elemento é calculada dependendo da altura de o elemento pai. Se o pai não for especificado explicitamente, a janela do navegador será usada como pai. auto define a altura com base no conteúdo do elemento
HTML5 CSS2.1 IE Cr Op Sa Fx
O resultado deste exemplo é mostrado na Fig. 1
Arroz. 1. Aplicando a propriedade de altura
Modelo de Objeto
document.getElementById ("elementID") .style.height
Navegadores
O Internet Explorer 6 define incorretamente a altura como altura mínima.
No modo peculiar, o Internet Explorer até e incluindo a versão 8.0 calcula incorretamente a altura de um elemento sem adicionar valores de preenchimento, margem e borda a ele.
O Internet Explorer até a versão 7.0, inclusive, não oferece suporte ao valor herdado.
o altura A propriedade CSS especifica a altura de um elemento. Por padrão, a propriedade define a altura da área de conteúdo. Se o tamanho da caixa for definido como caixa de borda, no entanto, ele determinará a altura da área da borda.
A fonte para este exemplo interativo é armazenada em um repositório GitHub. Se você gostaria de contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e envie-nos uma solicitação de pull.
As propriedades min-height e max-height substituem a altura.
Sintaxe
/ * Valor da palavra-chave * / height: auto; / *Valores
O tipo de dados CSS representa um valor de distância. Os comprimentos podem ser usados em várias propriedades CSS, como largura, altura, margem, preenchimento, largura da borda, tamanho da fonte e sombra do texto. ">Sintaxe formal
Exemplo
Html
CSS
div (largura: 250px; margem inferior: 5px; borda: 2px azul sólido;) #taller (altura: 50px;) #shorter (altura: 25px;) #parent (altura: 100px;) #child (altura: 50% ; largura: 75%;)Resultado
Questões de acessibilidade
Certifique-se de que os elementos definidos com uma altura não sejam truncados e / ou não obscureçam outro conteúdo quando a página for ampliada para aumentar o tamanho do texto.
Especificações
| Especificação | Status | Comente |
|---|---|---|
| Módulo de dimensionamento intrínseco e extrínseco de CSS de nível 4 |
Rascunho do Editor | |
| Módulo de dimensionamento intrínseco e extrínseco de CSS de nível 3 A definição de "altura" nessa especificação. |
Rascunho de trabalho | Adicionadas as palavras-chave max-content, min-content e fit-content. |
| Transições CSS A definição de "altura" nessa especificação. |
Rascunho de trabalho | Lista a altura como animável. |
| CSS nível 2 (revisão 1) A definição de "altura" nessa especificação. |
Recomendação | Adiciona suporte para o tipo de dados CSS que representa um valor de distância. Os comprimentos podem ser usados em várias propriedades CSS, como largura, altura, margem, preenchimento, largura da borda, tamanho da fonte e sombra do texto. "> |
| CSS Nível 1 A definição de "altura" nessa especificação. |
Recomendação | Definição inicial. |
| Valor inicial | auto |
|---|---|
| Aplica-se a | todos os elementos, exceto elementos inline não substituídos, colunas de tabela e grupos de colunas |
| Herdado | não |
| Percentagens | A porcentagem é calculada em relação à altura da caixa gerada contendo o bloco. Se a altura do bloco contendo não for especificada explicitamente (ou seja, depende da altura do conteúdo) e este elemento não estiver absolutamente posicionado, o valor calcula para automático. Uma altura percentual no elemento raiz é relativa ao bloco inicial. |
| meios de comunicação | visual |
| Valor calculado | uma porcentagem ou auto ou o comprimento absoluto |
| Tipo de animação | um tipo de dados CSS são interpolados como números reais de ponto flutuante. "> comprimento, os tipos de dados CSS são interpolados como números reais de ponto flutuante."> porcentagem ou calc (); |
| Ordem canônica | a ordem única não ambígua definida pela gramática formal |
Compatibilidade do navegador
A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de pull.
Atualizar dados de compatibilidade no GitHub
| Área de Trabalho | Móvel | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| cromada | Borda | Raposa de fogo | Internet Explorer | Ópera | Safári | Android webview | Chrome para Android | Firefox para Android | Opera para Android | Safari no iOS | Samsung Internet | |
| altura | Suporte completo para Chrome 1 | Suporte total do Edge 12 | Suporte completo para Firefox 1 | Suporte total para IE 4 | Opera Full suporte 7 | Safari Full support 1 | WebView Android com suporte total 1 | Suporte completo para Chrome Android 18 | Suporte completo para Firefox Android 4 | Opera Android Suporte total 10.1 | Safari iOS Suporte total 1 | Samsung Internet Android Suporte completo 1.0 |
| fit-content | Suporte completo para Chrome 46 | Edge Sem suporte Não | Firefox Sem suporte Não | IE Sem suporte Não | Opera Full suporte 33 | Safari Suporte total 11 Suporte total 11 Suporte total 9 Com prefixo Com prefixo | Opera Android? | Safari iOS Suporte total 11 Suporte total 11 Suporte total 9 Com prefixo Com prefixo Implementado com o prefixo do fornecedor: -webkit- | ||||
| max-content | Suporte completo para Chrome 46 | Edge Sem suporte Não | Com prefixo Com prefixo | IE Sem suporte Não | Opera Full suporte 44 | Suporte completo para Safari 11 | WebView Android Suporte completo 46 | Suporte completo para Chrome Android 46 | Com prefixo Com prefixo Implementado com o prefixo do fornecedor: -moz- | Samsung Internet Android Suporte completo 5.0 | ||
| min-content | Suporte completo para Chrome 46 | Edge Sem suporte Não | Firefox Suporte total 66 Suporte total 66 Suporte total 3 Com prefixo Com prefixo Implementado com o prefixo do fornecedor: -moz- | IE Sem suporte Não | Opera Full suporte 44 | Suporte completo para Safari 11 | WebView Android Suporte completo 46 | Suporte completo para Chrome Android 46 | Firefox Android Suporte total 66 Suporte total 66 Suporte total 4 Com prefixo Com prefixo Implementado com o prefixo do fornecedor: -moz- | Opera Android Suporte total 43 | Safari iOS Suporte total 11 | Samsung Internet Android Suporte completo 5.0 |
| esticam | Suporte completo para Chrome 28 Webkit-fill-available"> Nome Alternativo Suporte total 28Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo | Edge Sem suporte Não | Firefox Sem suporte Não | IE Sem suporte Não | Opera Full suporte 15 Webkit-fill-available"> Nome Alternativo Suporte total 15Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available | Safari Full support 9 Webkit-fill-available"> Nome Alternativo Suporte total 9Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available | WebView Android com suporte total 4.4 Webkit-fill-available"> Nome Alternativo Suporte total 4.4Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available | Suporte total para Chrome Android 28 Webkit-fill-available"> Nome Alternativo Suporte total 28Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available | Firefox Android Sem suporte Não | Opera Android? | Safari iOS Suporte total 9 Webkit-fill-available"> Nome Alternativo Suporte total 9Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available | Samsung Internet Android Suporte completo 5.0 Webkit-fill-available"> Nome Alternativo Suporte total 5.0Webkit-fill-available"> Nome Alternativo Webkit-fill-available"> Nome Alternativo Usa o nome não padrão: -webkit-fill-available |
