CODEWITHSUNDEEP
cssfont-size
Josh Balsillie
Josh Balsillie

Reputation: 129

Why are my em values inconsistent between elements?

So I'm having an issue with consistent sizing of "em" values and I can't seem to figure out why.

I am using SCSS for my site and preprocessing all my SCSS files to a single CSS file.

Let me illustrate how my structure is set up.

/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */

.test {
	width: 5em;
	height: 5em;
	
	border-style: solid;
	border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
	width: 1em;
	height: 1em;
	
	border-style: solid;
	border-width: 0.15em; /* normally $defaultBorderWidth */
}
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
  <div class="test">
    <div></div>
  </div>
</body>
</html>

This in turn shows the result I am expecting, which is a 2px border on both div tags. I am able to replicate this on my site in exactly the same way.

My issue is that in some of my widgets, there are instances where I get a 3px border instead of 2px.

I've read that my border-width could be cascading with another attribute value, but for the life of me can't figure out where or why it's happening. When I look at the developer tools in my browsers I see all instances of border-width are 0.15em.

If an explanation / debug cannot be determined, I can provide a live site example, with the expectation that it will be corrected on the live site ( FYI for future viewers of this article ).

Upvotes: 2

Views: 936

Answers (1)

Josh Balsillie
Josh Balsillie

Reputation: 129

since095 provided the answer to use rem as opposed to em. Where rem always uses the root default font size of the <html> tag (which you can override), in contrast em uses the current tag font size and adjusts other em values accordingly (good for inheritance).

There are advantages and disadvantages of both, and it really comes down to how you intend to structure your site. Inheritance can get messy and complicated really fast, but if used correctly can be very powerful. Controlling every aspect of your site with uniform measurements can help streamline and simplify, but doesn't carry the power of inheritance.

I've come across those that suggest a combination of the two, using rem to set constants such as font size, borders, and em for spacing such as margins and padding.

Below is an example of the use of using rem and em.

.testRem h1 {
	border-style: solid;
	
	font-size: 3rem;
	width: 15rem;
	height: 3rem;
	margin: 0.5rem;
	border-width: 0.5rem;
}
.testEm h1 {
	border-style: solid;
	
	font-size: 3em;
	width: 5em;
	height: 3em;
	margin: 0.5em;
	border-width: 0.5em;
}
<!doctype html>
<html>
<head>
</head>
<body>
  <div class="testRem">
    <h1>Test rem</h1>
  <div class="testEm">
    <h1>Test em</h1>
  </div>
</body>
</html>

Upvotes: 1

Related Questions