I'm struggling to comprehend how em units function in CSS. I am attempting to make an element, specifically a div, scale proportionally to the font size. After narrowing down my issue, this is what I've come up with.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body { font-size: 100%; }
.EventReg {
border:solid #000000 .063em;
background-color:#000000;
padding:.625em;
width:13.65em;
}
</style>
</head>
<body>
<div style="font-size:2em;">Event Registration</div>
<div class="EventReg"></div>
</body>
</html>
Currently, everything scales correctly in IE, FF, and Chrome when I modify body { font-size: 100%; } to a different percentage.
My expectation is that both the text and the div should have equal lengths on a computer browser. However, on my Android smartphone, the text appears wider than the div.
I anticipate that despite scaling, the div below the text should match the same width as the text itself.
If you have any insights into where I may be going astray or if my assumption is incorrect, please share your thoughts.