CODEWITHSUNDEEP
htmlcsshtml-lists
surabhi sanduja
surabhi sanduja

Reputation: 21

Different font sizes in nested HTML list

I have created a nested ol li list class in CSS for my website but there is some mistake due to which each li is displayed in different font-size. although I have defined the font-size to it.

 .number_list ol {
       font:normal 1.2em 'Arial' ,Helvetica; 
       text-align:justify;
  }
 .number_list li{
      list-style:decimal;
      list-style-position:outside;
      font-size:1.2em;
  }
  .number_list ol li{ 
      list-style:lower-alpha;
      list-style-position:outside;
      margin-right:5px;
      font-size:1.2em;
  }
  .number_list ol li ol li {
      list-style:lower-roman;
      list-style-position:outside; 
      margin-right:5px;
      margin-top:5px; 
      font-size:1.2em;
  }

Upvotes: 2

Views: 3007

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The em unit, when used in a font-size declaration, denotes the font size of the parent element. Thus, you are cumulatively setting the size larger and larger in nested elements.

To have the same font size within the entire element, simply set it on the outermost element only. This means keeping your font:normal 1.2em 'Arial' ,Helvetica; rule and removing the font-size rules (or changing them to font-size: 1em, but this is needed only if some other CSS rules may set the size on them).

Upvotes: 0

dippas
dippas

Reputation: 60563

That's because you are using em, you can use rem instead.

em is equal to the size of the font that applies to the parent of the element in question. instead rem is applied to root of the element.

From MDN

em

This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often have values expressed in em.

rem

This unit represents the font-size of the root element (e.g. the font-size of the <html> element). When used on the font-size on this root element, it represents its initial value.

This unit is practical in creating perfectly scalable layout. If not supported by the targeted browsers, such layout can be achieved using the em unit, though this is slightly more complex.

.number_list ol {
  font: normal 1.2rem 'Arial', Helvetica, text-align:justify;
}

.number_list li {
  list-style: decimal;
  list-style-position: outside;
  font-size: 1.2rem;
}

.number_list ol li {
  list-style: lower-alpha;
  list-style-position: outside;
  margin-right: 5px;
  font-size: 1.2rem;
}

.number_list ol li ol li {
  list-style: lower-roman;
  list-style-position: outside;
  margin-right: 5px;
  margin-top: 5px;
  font-size: 1.2rem;
}
<div class="number_list">
  <ol>
    <li>test a</li>
    <li>test b</li>
    <li>test c</li>
    <li>test d
      <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ol>
    </li>
  </ol>
  <div>

Upvotes: 5

NBTX
NBTX

Reputation: 606

The 'mistake' is that you are using em.

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

From: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

In short, you are setting each sub-element's font size 120% bigger than the one before it. To fix it, just set a font size using an absolute unit - such as pt.

You may refer to this CodePen for an example: https://codepen.io/masterdoctor/pen/GmJEbN?editors=1100

Upvotes: -1

Related Questions