Устранить призрачные поля ниже элемента HTML5 canvas?

Question

Когда мы создаем элемент холста HTML5, призрачное поле появляется под элементом холста, даже если мы устанавливаем поле и отступы равными 0.

Пример: http://jsfiddle.net/yvbmd/

Мы пробовали разные вещи, но не можем стереть поле для привидений.

Как мы можем создать элемент canvas без этого призрачного поля?

Answer 1

Добавьте vertical-align: bottom к нему.

Это вызвано тем, что холст является встроенным элементом. Как таковой, он фактически считается персонажем. Таким образом, он должен следовать правилу базовой линии, которое должно оставлять немного места ниже линии в случае символов, таких как gjpqy, которые опускаются ниже базовой линии. Установив vertical-align на bottom, вы фактически выравниваете холст по нижней части выпадающих букв. Пока сам холст выше line-height, у вас не будет проблем. Если холст будет короче line-height, вы начнете видеть «призрачные поля» над холстом, так как он резервирует место для bdfhklt, более высоких букв. Это можно исправить, добавив правило line-height: 1px.