Diferença entre "em" e "%"

Olá Bruna!

"em" e "%" são unidades de medida diferentes que podem ser utilizadas para definir margens em HTML e CSS.

O "em" é uma unidade de medida relativa à fonte do elemento pai. Por exemplo, se a fonte do elemento pai for 16px, 1em será igual a 16px. Já o "%" é uma unidade de medida relativa ao tamanho do elemento pai. Por exemplo, se a largura do elemento pai for 100px e você definir uma margem de 10%, a margem será de 10px.

Em resumo, o "em" é uma medida relativa à fonte do elemento pai e o "%" é uma medida relativa ao tamanho do elemento pai.

Espero ter ajudado e bons estudos!

Oi Bruna, tudo bem?

"Em" é uma unidade de medida relativa à fonte utilizada, ou seja, 1em é igual ao tamanho da fonte atual. Por exemplo, se a fonte atual for 16 pixels, 1em será equivalente a 16 pixels. Portanto, se você definir uma margem de 1em, a margem será igual ao tamanho atual da fonte.

Por outro lado, "%" é uma unidade de medida relativa ao tamanho do elemento pai. Por exemplo, se o elemento pai tiver uma largura de 500 pixels e você definir uma margem de 20%, a margem será igual a 100 pixels (20% de 500 pixels).

Em resumo, "em" é uma unidade de medida relativa ao tamanho da fonte e "%" é uma unidade de medida relativa ao tamanho do elemento pai. A escolha de uma ou outra unidade dependerá do objetivo e do contexto do layout que está sendo criado.

Um abraço e bons estudos.

Entendi. Obrigada.

O rem é a mesma coisa que o em?

Oi Bruna,

Não, o rem e o em não são a mesma coisa.

A unidade "em" representa o tamanho da fonte do elemento pai. Por exemplo, se um elemento "p" tem uma fonte definida em "16px", e dentro dele há um elemento "span" com uma fonte definida em "0.5em", a fonte do "span" será de "8px" (0.5 x 16px).

Já a unidade "rem" representa o tamanho da fonte do elemento raiz, ou seja, o elemento "html". Isso significa que o valor "rem" não é afetado pelo tamanho da fonte dos elementos pais, mas apenas pelo tamanho definido para a fonte do elemento raiz.

Por exemplo, se a fonte do elemento raiz ("html") estiver definida como "16px", e um elemento "p" tiver uma fonte definida como "1.5rem", a fonte do "p" será de "24px" (1.5 x 16px).

Portanto, em resumo, "em" e "rem" são unidades de medida diferentes em CSS, com comportamentos diferentes em relação à hierarquia dos elementos e à definição de tamanho da fonte raiz.

Em geral, a escolha entre rem e em depende do contexto e das necessidades específicas do layout.

Um abraço e bons estudos.

Oi Bruna, tudo bem? Vi que o pessoal já te ajudou, então vim agregar com outras informações relacionadas a sua pergunta. Na hora de definir margens em HTML ou CSS, existem várias unidades de medida disponíveis, algumas delas são:

em: é uma unidade relativa ao tamanho da fonte do elemento pai. Por exemplo, se o tamanho da fonte do elemento pai é 16px, 1em será equivalente a 16px. É uma unidade bastante utilizada para definir tamanhos de fonte e espaçamentos em relação ao tamanho da fonte.

%: é uma unidade relativa ao tamanho do elemento pai. Por exemplo, se o tamanho do elemento pai é 500px, e a margem definida é 20%, a margem terá um tamanho de 100px (20% de 500px). É uma unidade bastante utilizada para definir tamanhos em relação ao tamanho do contêiner que o elemento está inserido.

rem: é uma unidade relativa ao tamanho da fonte do elemento raiz (normalmente o elemento html). Por exemplo, se o tamanho da fonte do elemento raiz é 16px, 1rem será equivalente a 16px. É uma unidade bastante utilizada para definir tamanhos de fonte e espaçamentos em relação ao tamanho da fonte do elemento raiz.

px: é uma unidade absoluta, que define o tamanho em pixels. É uma unidade bastante utilizada para definir tamanhos exatos em pixels. Não é responsivo.

pt: é uma unidade absoluta, que define o tamanho em pontos. Um ponto é equivalente a 1/72 de polegada. É uma unidade bastante utilizada para definir tamanhos em impressão.

cm, mm, in: são unidades absolutas, que definem o tamanho em centímetros, milímetros e polegadas, respectivamente. São unidades utilizadas para definir tamanhos em impressão ou em elementos que precisam ter medidas precisas para uma determinada finalidade.

Lembrando que um dos principais pontos do seu desenvolvimento web é a responsividade.