Diferença entre PX, EM, % no CSS explicou

O CSS oferece uma variedade de funcionalidades para alterar o tamanho do elemento. Os mais comuns entre essas unidades são PX, EM e %(porcentagem). Para um novato, seria difícil entender a diferença entre eles, assim eles praticam a unidade PX mais. No entanto, o EM A %(porcentagem) serve ao comportamento responsivo dos elementos. Tendo em vista a importância de tudo isso, este artigo apresenta um guia que fornece a diferença entre PX, EM e %(porcentagem).

Este post demonstra a diferença entre PX, EM e %(porcentagem). Além disso, você também conhecerá os comprimentos de unidades realistas e absolutos e suas diferenças.

Qual é a diferença entre PX, EM e porcentagem (%) no CSS?

No CSS, as unidades de dimensionamento são classificadas em duas categorias, a medida absoluta e relativa.

Unidades absolutas

As unidades absolutas têm valores fixos, portanto, não altere seus valores até que o usuário os altere manualmente. O px A unidade se enquadra na categoria absoluta de unidades de dimensionamento no CSS. Embora o PX não seja bom para a capacidade de resposta, ainda é praticado onde os elementos exigem tamanhos fixos na tela. Além disso, o novo usuário tende a usar o px como a unidade de dimensionamento, pois é fácil de manusear e não depende de nenhuma outra unidade de tamanho ou elemento.

Unidades relativas

Os outros dois Em e percentagem pertencem à categoria relativa de elementos, pois ambos mudam seu comportamento para gerenciar a capacidade de resposta.

Em: Esta unidade refere -se ao tamanho da fonte do elemento pai/raiz. Também pode ser usado para ajuste de largura/altura, mas o valor de 1em seria 16px.

percentagem(%): A unidade percentual mostra a relevância com o elemento pai.

Por exemplo, se um elemento pai define o largura = “10px““. Agora, esse valor seria considerado uma referência para associar a largura em percentagem.

Observação: O CSS oferece várias outras unidades relativas que incluem REM, VW (Largura da Porta de Exibição) e VWH (Altura da View Port) também pertencem à categoria relativa.

Exemplo: Usando valores de PX, EM e porcentagem

O código HTML a seguir é praticado chegando à diferença entre PX, EM e Valores percentuais.

Html

largura em %

tamanho de fonte em Em

No código acima, existem elementos de dois parentes (tags div) e cada pai que tem um filho. A primeira divisão dos pais contém um parágrafo que exerceria a largura em porcentagem e a segunda divide considera o tamanho da fonte do elemento.

CSS

O CSS acima seria a principal parte interessada na demonstração da diferença entre PX, EM e porcentagem. A largura das tags div é definida como 250px, o que significa que seria igual a 100%. Por exemplo, no código acima, o .por classe leva 75% da largura total (250px).

Da mesma forma, o tamanho da fonte do segundo div. Se o valor do EM for alterado, ele mudaria em relação ao 12px (como do elemento pai).

Saída

A partir da saída, observa -se que a largura do elemento filho (parágrafo) foi ajustada para 75% de seu elemento pai (div). Além disso, o tamanho da fonte é definido como 2em, o que significa que seria duas vezes em comparação com o tamanho da fonte do seu elemento pai (12px = 1em).

Conclusão

O px pertence à categoria absoluta de unidades de comprimento, enquanto o EM e %(porcentagem) refere -se à classe relativa de unidades de dimensionamento. O valor de px é corrigido no documento HTML, mas o Em e %(percentagem) depende da unidade usada pelo elemento pai. O EM manipula principalmente o tamanho da fonte dos elementos HTML e a (%) unidade de porcentagem refere -se principalmente à alteração da altura/largura de um elemento HTML (de acordo com o elemento pai). Neste artigo, você teria aprendido o básico de várias unidades como PX, EM e porcentagem. Para uma melhor compreensão, demonstramos um exemplo que melhor esclarece a diferença entre todas essas unidades.