Откуда взялся непонятный верхний отступ у button?

Question

[chakaponi]

Стили красного блока:

background: red;
display: inline-block;
height: 24px;
width: 60px;

Кроме данных стилей отсутствуют какие-либо другие. Reset.css не помогает

Comments

[Пашенька]

Вероятнее всего это не отступ, а vertical-align

[chakaponi]

like-a-boss, vertical-align: top сработал в качестве решения, но логику такого поведения я проследить не могу

[Пашенька]

chakaponi, не можете в силу отсутствия знаний о боксовой модели в CSS, типам элементов и базовой линии.

[chakaponi]

like-a-boss, Все эти знания присутствуют, и в данном случае vertical-align выглядит просто как костыль

[Пашенька]

chakaponi, какой ещё костыль? Вы точно не знаете, что у инлайновых элементов есть базовая линия.

[chakaponi]

like-a-boss, Повторное изучение данной статьи освежило мою память и расставило всё по своим местам. Пожалуйста, оформите своё решение как ответ чтобы я мог отметить его

[dom1n1k]

но логику такого поведения я проследить не могу

В зависимости от того, содержит ли красный блок какой-то текст или он пуст, его положение будет разным. Осмысление этого факта и его причин - и есть ключ к разгадке.

[chakaponi]

dom1n1k, Я как обычно строю правильные догадки с самого начала, но... На автоматизме почему-то считаю их неверными. Спасибо за дополнение

Answer 1

[Пашенька]

Вероятнее всего это не отступ, а vertical-align