Solucionado
afinal de contas qual é a diferença entre rem e em
eu sei que se eu colocar no
html{font-size:16px;}
quando eu for utilizar um rem em outro elemento ele tem como base os 16px especificado no html.
e o "em" ele se baseia onde para alterar o tamanho usado por ele ?
Oi Jorge,
Excelente pergunta! 👍
EM e REM tem o mesmo conceito de % mas ao invés de serem baseadas no tamanho de um elemento, essas medidas são baseadas em tamanho de fonte. 🤔
EM usa o tamanho da fonte do elemento pai e REM usa o tamanho da fonte do <html>.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Um exemplo</title>
</head>
<body>
<div>
<img src="img/foto" alt="Uma foto">
</div>
</body>
</html>
CSS:
html {
font-size: 10px;
}
div {
font-size: 20px;
}
img {
width: 10em; /* A largura será de 200px */
height: 10rem; /* A altura será de 100px */
}
Para saber mais: Unidades relativas com EM e REM
Continue explorando e praticando, você está no caminho certo! 💯
Luis boa noite, entendi sua explicação, foi bem simples e direta.
Mas ainda me resta uma dúvida, por exemplo, se eu colocar os 20px do font-size da div no body, ele é um elemento pai de todos ? ou isso é falso, o width da imagem ainda seria 200 ?
Outra duvida é quando eu coloco 10px no font-size do html isso diz que todos os font-size da página vão ter 10px ? se sim então se eu não definir o font-size na div ela vai herdar os 10px do html então o width da imagem seria de 100px ?
Oi Jorge,
Excelente questionamento! 👍
Vamos esclarecer essas dúvidas:
body como elemento pai: Sim, o body é um elemento pai de muitos elementos na página, incluindo a div no seu exemplo. Se você definir font-size: 20px; no body, a div herdará esse valor, a menos que você defina um font-size diferente diretamente nela. Portanto, se a div não tiver um font-size específico, o width da imagem (com 10em) seria 200px (10 * 20px).
font-size no html: Quando você define font-size: 10px; no html, você está definindo o tamanho base da fonte para toda a página. Se você não definir um font-size específico em outros elementos, eles herdarão esse valor. No seu exemplo, se a div não tiver um font-size definido, ela herdará os 10px do html. Consequentemente, o width da imagem (com 10em) seria 100px (10 * 10px). 🤔
Em resumo:
em se baseia no font-size do elemento pai.rem se baseia no font-size do elemento html.Para saber mais: Unidades de comprimento CSS - O CSS tem várias unidades diferentes para expressar um comprimento, incluindo em e rem.
Continue praticando e explorando, o aprendizado é uma jornada! 💪