CODEWITHSUNDEEP
htmlcssfont-size
user7461846
user7461846

Reputation:

a div has no inherited font size from body

body{
font-size:0.9em;
}

.m1{
font-size:0.9em;
}
<div class='navt'>
<div class='m1'>LOREM</div>
<div class='m1'>LOREM</div>
</div>

If you remove font-size from m1 you'll see that the font size changes i.e. not inherited from body.

I'm expecting that all divs inside body have a font-size equal to the one declared for body.

Don't tell me that I need to set font-size separately for each div?

Upvotes: 2

Views: 303

Answers (2)

Sai Krishna Konidena
Sai Krishna Konidena

Reputation: 31

body { font-size: 1em} .text-one, .text-two, .text-three {font-size: 1em}

HaiHalloBye

Upvotes: 0

Gerard
Gerard

Reputation: 15786

When using em it means the size is relative to its parent. You should use rem to make it relative to the root of the document.

In this case, the font size for .m1 is 0.9 * 0.9 = 0.81px.

body  {
  font-size: 0.9em;
}

.m1 {
  font-size: 0.9em;
}

.m2 {}

.m3 {
  font-size: 0.9rem;
}

.m4 {
  font-size: 0.9rem;
}
<div class='navt'>
  <div class='m1'>LOREM</div>
  <div class='m2'>LOREM</div>
  <div class='m3'>LOREM</div>
  <div class='m4'>LOREM</div>
</div>

Upvotes: 3

Related Questions