Кексби. Базовая стилизация / Популярные товары [14/23] ?Наследование

Есть каталог товаров:

 <div class="popular-and-price">
      <h2 class="section-title">Популярные товары</h2>
      <a class="btn" href="#" title="Посмотреть все товары">Каталог</a>
      <div class="popular-items">
        <div class="catalog-item">
          <img src="img/glasses-1.jpg" alt="очки «Классика жанра»" width="306" height="206">
          <h3>Очки «Классика жанра»</h3>
          <b>300 р.</b>
          <a class="btn" href="#">Описание</a>
          <a class="btn" href="#">Купить</a>
        </div>
        <div class="catalog-item">
          <img src="img/glasses-2.jpg" alt="очки «Жалюзи»" width="306" height="206">
          <h3>Очки «Жалюзи»</h3>
          <b>400 р.</b>
          <a class="btn" href="#">Описание</a>
          <a class="btn" href="#">Купить</a>
        </div>
        <div class="catalog-item">
          <img src="img/glasses-3.jpg" alt="очки «Базилис»" width="306" height="206">
          <h3>Очки «Базилис»</h3>
          <b>500 р.</b>
          <a class="btn" href="#">Описание</a>
          <a class="btn" href="#">Купить</a>
        </div>
      </div>

Цель 3 просит задать для .catalog-item размер шрифта 16px. Задали и текст в теге h3 стал меньше.
Цель 4 просит для дочернего элемента, то есть для .catalog-item h3, снова задать размер шрифта в 16px. Текст стал еще меньше.

Почему так происходит???
Ведь согласно наследованию текст внутри тега h3 должен был СРАЗУ унаследовать размер шрифта от .catalog-item.

В CSS-коде нигде ранее не задавался размер шрифта для тега h3.

Заранее благодарю за помощь!

Приветствую!

В браузере некоторым элементам задаются стили по умолчанию. Заголовкам, спискам, параграфам и тд, чтобы без стилей всё выглядело красиво. Заглловку по умочланию в хроме задаётся размер в относительных единицах em. Поэтому-то его размер и меняется, когда мы задаём размер шрифта родительскому блоку.

25

1 лайк

Огромное спасибо! Не знал, что такое бывает.