Почему высота блока ссылки больше высоты самой ссылки?

Question

[Рома Зварич]

Здравствуйте.
Помогите пожалуйста понять, почему элемент (block), содержащий ссылку <a> (inline) по высоте больше ссылки?

Скриншот №1 (блок) - высота 54px
Скриншот №2 (ссылка) - высота 50px

P.S. По всей видимости, дело в размере текста. Но если он визуально не выходит за границы родительского блока, почему увеличивается высота блока?

Спасибо

Comments

[R0nti]

Добрый день. Вероятнее всего, что вы забыли выровнять элемент по вертикали относительно своего родителя. Т.е. к ссылке с селектором по классу head_logo_a, необходимо было задать vertical-align: bottom; А вообще возьмите за привычку, если вы задаете элемент как блочно-строчный, то указывайте vertical-align.

[Рома Зварич]

R0nti, спасибо за ответ

[R0nti]

Да не за что! Успехов в верстке.

Answer 1

[Рома Зварич]

Что-то сделал (сам не знаю, что) и проблема решилась

Answer 2

[R0nti]

Добрый день. Вероятнее всего, что вы забыли выровнять элемент по вертикали относительно своего родителя. Т.е. к ссылке с селектором по классу head_logo_a, необходимо было задать vertical-align: bottom; А вообще возьмите за привычку, если вы задаете элемент как блочно-строчный, то указывайте vertical-align.

Answer 3

[ReActor Дмитрий Вершанский]

Вам padding не о чем не говорит? Прописанный к блоку ...

.head_logo {
    width: 250px;
    box-sizing: border-box;
    float: left;
    margin-right: 10px;
    padding: 0 10px;
}

Comments

[Рома Зварич]

Так боковой же прописан, а не верхний и нижний

[ReActor Дмитрий Вершанский]

При условии, что вами не задана высота блоку принудительно, он растет согласно контенту,вкладываемому в него. Посмотрите внимательнее, что у вас кроме ссылки наращивает его height. Может это "Каталог"А может это изображение в правой его части?

[ReActor Дмитрий Вершанский]

Рома Зварич, К слову сказать вот такая запись селектора - search_panel_menu_dropdown, нифига не по БЭМу, если вы пишете согласно этой методе...

[Рома Зварич]

>При условии, что вами не задана высота блоку принудительно, он растет согласно контенту,вкладываемому в него
Парадокс в том, что вкладываемый контент = 50px, а сам блок почему-то на 4px больше. При этом, внутренних полей нет.

> Посмотрите внимательнее, что у вас кроме ссылки наращивает его height
В том то и проблема, что остальные блоки по высоте = 50px, а именно этот вылезает за рамки почему-то.

> К слову сказать вот такая запись селектора - search_panel_menu_dropdown
Спасибо. Посмотрю, что такое БЭМ. Я только учусь.

[ReActor Дмитрий Вершанский]

Сама картинка точно по контуру обрезана? Нет ли у нее полей остаточных (холст)

[ReActor Дмитрий Вершанский]

есть физический размер картинки с холстом, а есть видимый

[Рома Зварич]

HunteR-VRX,

> Сама картинка точно по контуру обрезана? Нет ли у нее полей остаточных (холст
В логотипе не картинка, это ссылка (текст)

[ReActor Дмитрий Вершанский]

Рома Зварич, а вот это что?

[ReActor Дмитрий Вершанский]

и на худой конец попробуйте box-sizing: border-box убрать тем самым перевести на дефолтный box-sizing: content-box

[Рома Зварич]

HunteR-VRX,

> а вот это что?
Картинка. Но панель разработчика даже в JSFiddle показываетс, что высота = 50px
https://jsfiddle.net/u809ocsb/1/?utm_source=websit...

[Рома Зварич]

Что-то сделал (сам не знаю, что) и проблема решилась.
Спасибо за ответы