CODEWITHSUNDEEP
htmlcss
Spittal
Spittal

Reputation: 779

Margin/Padding resizing with rem

I'm trying to change the font-size of my root element to change the overall font-sizes, margins, and paddings.

The thing is when I change the html tag's font-size it will change the fonts all perfectly but the margins and paddings stay the same as if 1rem = 10px

Here's a pen that shows what I mean:

http://codepen.io/Spittal/pen/xewqh/

-HTML

<div class='container'>
  <h1>Hello! REM!</h1>
  <p>Hello Paragraph REM!</p>
</div>

-CSS

html { 
    font-size: 61.5%;
}

.container {
  background-color: red;
  padding: 3rem;
  margin: 3rem;
}

h1 {
  font-size: 4rem;
}

p {
  font-size: 1.8rem;
}

If you try changing the font-size of the html element and you'll see that it changes just the font-sizes not the margins or paddings.

Any help would be appreciated, thanks!

Upvotes: 2

Views: 5941

Answers (2)

GHandel
GHandel

Reputation: 172

I took a look at your codpen and found that the margin and padding sizes do actually change.

Take a look a these two screenshots from Chrome page inspector:

62% font size

63% font size

Hope this sheds some light on things!

Upvotes: 2

wuno
wuno

Reputation: 9875

It appears to be working fine in chrome.

This could have to do with the browser you are using to check it.

You can insulate your css to default a set px if the browser does not support.

A good example of what you are trying to do is this,

body { font-size: 12px; margin: 0; padding: 0;}
.one, .two {
  border: solid #666;
  border-width: 10px; border-width: 0.01rem;   /* 1vw */
  border-radius: 30px; border-radius: 0.03rem; /* 3vw */
  font-size: 20px; font-size: 0.02rem;         /* 2vw */
  padding: 20px; padding: 0.02rem;             /* 2vw */
}

Please refence here for more information, Here

Upvotes: 0

Related Questions