Яркая метка генерирует нежелательную высоту

У меня возникла проблема с нежелательной дополнительной высотой, добавленной к тегу привязки.Яркая метка генерирует нежелательную высоту

Это основной код

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<a style="display: inline-block; padding:0; margin:0;"> 
    <span style="display:inline-block; width:25px; height:25px; background-color: red; padding:0; margin:0;"></span> 
    </a> 
</body> 
</html>

и вы можете проверить здесь - http://jsbin.com/cewuza/2/edit

SO как удалить ненужную высоту? Как вы можете видеть, я попытался изменить отображение с inline на встроенный блок.

enter image description here

источник

2015-01-17 digitalzoomstudio

размер шрифта: 0; исправляет это на якоре .. но это лучшая практика? – digitalzoomstudio

Какая дополнительная высота? Ваш jsbin показывает красную рамку размером 25 × 25 пикселей. Так в чем проблема? Ваши снимки экрана о чем-то другом. Пожалуйста, отправьте код, который фактически воспроизводит проблему и точно определяет, в чем проблема. –

проверить привязную метку .. не сам диапазон показывает 29px – digitalzoomstudio

Ниже показано, что проблема на самом деле:

<a style="display: inline-block; outline: solid blue;"> 
 
    <span style="display:inline-block; width:25px; height:25px; background-color: red;"></span> 
 
</a>

span элемент сидит на базовой линии текста, так как встроенный блок ведет себя как большой (или, может быть, см все) текст знак. Существует некоторое пространство ниже базовой линии, для descenders букв, таких как j, g и q.

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

<a style="display: inline-block; outline: solid blue;"> 
 
    <span style="vertical-align: bottom; display:inline-block; width:25px; height:25px; background-color: red;"></span> 
 
</a>

источник

2015-01-17 13:17:43

Яркая метка генерирует нежелательную высоту

ответ

Смежные вопросы