Кексби. Эталонное решение. Блок 8.

Общее
1

Прошу разъяснить некоторые моменты из эталонного решения.
А именно интересует самый последний контейнер - footer-copyright .

HTML:

<div class="footer-copyright clearfix">
 <a class="logo-htmlacademy" href="https://htmlacademy.ru"><img src="img/htmlacademy.png" alt="HTML Academy" width="27" height="34"></a><span class="copyright-text"><b>Разработчик:</b> <a href="https://htmlacademy.ru">HTML Academy</a></span>
</div>

CSS:

 .footer-copyright {
  float: left;
  width: 300px;
  margin-left: 200px;

  font-size: 0;
}

.footer-copyright a {
  color: #989898;
  text-decoration: none;
}

.logo-htmlacademy {
  position: relative;

  display: inline-block;
  width: 70px;
  height: 66px;

  vertical-align: top;

  background-color: #1b1b1b;
  border: 1px solid rgba(255, 203, 120, 0.1);
}

.logo-htmlacademy:hover {
  border-color: rgba(255, 203, 120, 0.3);
}

.logo-htmlacademy:active {
  opacity: 0.5;
}

.logo-htmlacademy img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

.footer-copyright span {
  display: inline-block;

  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  color: #989898;
}

.copyright-text {
  margin-top: 25px;
  margin-left: 30px;
}

Вопросы:

  1. Для чего блоку .footer-copyright делаем font-size: 0 ?
  2. Как так получается, что при задании свойства vertical-align: top инлайн-блоку .logo-htmlacademy выравнивается .footer-copyright span по центру .logo-htmlacademy ?

Ведь без vertical-align: top весь span падает вниз:

Screenshot_138
Screenshot_1381246×616 39.6 KB

2
  1. font-size обнуляется, чтобы убрать отступы между элементами inline-block, которые есть по умолчанию и зависят от размера шрифта. (Курс «Сетки», задание 32 - inline-block и пробелы в коде).
  2. Элементы с vertical-align выравниваются внутри родителя друг относительно друга, поэтому у каждого должно быть явно задано свойство vertical-align.
1 лайк
3

То есть, если внутри родителя скажем 3 инлайн-блока , а свойство vertical-align задано только двум блокам, то схема уже не работает ? Не будет выравнивания по вертикали ?

4

Выравнивание будет, и будет ориентировано по этим двум блокам, у которых задано свойство.

В случае, когда у нас есть несколько элементов с типом inline-block различной высоты, то выравнивание происходит так:

  1. Если есть текстовый контент - по строке текста (по последней строке текста, если строк несколько).
    baseline
    baseline1248×292 2.42 KB

Не самое очевидное поведение на первый взгляд, но становится понятно, если начертить линию выравнивания. Здесь задано vertical-align:middle для 2 и 4 блока.

2-4middle
2-4middle1203×298 2.94 KB

Видно, что блоки 2 и 4 центруются относительно друг друга, а вот блоки 1, 3 и 5 с выравниванием по умолчанию baseline подстроились так, чтобы их базовая линия текста совпадала с линией выравнивания middle блоков 2 и 4. То есть, задав явно vertical-align для 2 и 4 блока, мы переопределили основную линию, по которой выстраиваются все элементы.

Поэтому, чтобы ожидать явного выравнивания блоков в линию, свойство лучше задавать всем элементам, и они выстроятся одинаково, например теперь vertical-align: middle задано для всех

middle-all
middle-all1223×273 4.31 KB

  1. Если текстового контента нет, базовой линией выравнивания по умолчанию становятся нижние границы блоков.

    no-content
    no-content1213×302 1.01 KB

  2. Если в одном из блоков есть строки, а в другом нет, (например, это img), то выравнивание по умолчанию идет по нижней границе самого высокого блока. Он как бы «формирует» строку своей высотой. Пример есть в разделе «Оформление текста», задание 9 «свойство vertical-align».

  3. Насчёт вашего примера.
    Пока выравнивание не задано явно, оно идет по базовой линии картинки (больший по высоте блок).
    Vertical-align:top для блока с картинкой переопределяет линию выравнивания по верхнему краю, и «Разработчик» теперь тоже выравнивается по верху. Чтобы сделать его по центру, добавлен отступ сверху 25px.
    По сути, когда мы уже задали блоку с картинкой выравнивание по верху, «Разработчику» можно задать хоть «middle», хоть «baseline», хоть «top» — это почти не влияет на результат. Можно было бы вообще убрать выравнивание для блока «Разработчик» — он всё равно подстроится под блок с картинкой с vertical-align:top.
    Не знаю, почему так сделано, но могу предположить.
    Во первых, иногда лучше явно задавать некоторые свойства.
    Блок с картинкой сформировал высоту строки и базовую линию сверху. Нижняя граница этой строки — это нижняя граница блока с картинкой. Если блоку «Разработчик» задать выравнивание «bottom», он убежит вниз.
    Во-вторых, свойство vertical-align: middle чуть-чуть центрует текст внутри собственной строки.
    Например, если font-size: 14px и line-height: 14px — эффекта не будет, ведь размер шрифта равен высоте строки. Но при font-size: 14px и line-height: 26px различия будут

5

AlinaGlinskaya, спасибо Вам за развернутый ответ !