All geek questions in one place

Why span height is larger than font size

I don’t understand why the height of the span element is greater than its font size (margin and padding = 0): JSFiddle example

<head>
    <style>
        .analized-element {
            font-size: 20px;
            font-family: "Lucida Console", "Lucida Grande", monospace;
        }
    </style>

</head>
<body>
    <span class="analized-element">Test message</span>
</body>

This problem exists only on Mac :

== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 23px
=========================

As we can see, there are 3 more pixels. The same example on Windows :

== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 20px
=========================

The height of the span is equal to its font size.

+4
source share
2 answers
@media screen and (max-device-width: 460px){
    body{
        -webkit-text-size-adjust: none;
    }
}
0
source

I think you can add: line-height: 20px and display: an inline block for the .analized-element element to fix this problem or line-height: 1 and font-size: 20px for the body element

0
source

Source: https://habr.com/ru/post/1620758/

More articles:


All Articles