mirror_css/spcss
1
0
Fork 0
mirror of https://github.com/susam/spcss.git synced 2025-09-03 02:42:40 +02:00
Code Issues Projects Releases Wiki Activity

Use unitless line-height for heading elements

Browse Source 
Prior to this fix, the line-height of heading elements is set to 1.2em.
This leads to an issue when the font-size of heading anchor element is
reduced as shown in the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Test</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, intial-scale=1">
      <link rel="stylesheet" href="sp.css">
      <style>
        h2 {background: lightblue}
        div {background: orange; display: inline-block}
        p {background: lightgreen}
        .b a:empty {font-size: small}
      </style>
    </head>
    <body>
      <div class="a"><h2>Foo<a href="#"></a></h2><p>Bar</p></div>
      <div class="b"><h2>Foo<a href="#"></a></h2><p>Bar</p></div>
    </body>
    </html>

The smaller font-size for the anchor element within class "b" leads to a
larger overall size for the heading element as explained at
<https://stackoverflow.com/a/21575694>. Set the line-height of heading
elements to the unitless number 1.2 to resolve this issue.
This commit is contained in:
Susam Pal
2020-12-31 21:21:24 +05:30
parent ff15568888
commit f23895e4b9
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sp.css
View File

@@ -8,7 +8,7 @@ body {
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em 0;
line-height: 1.2em;
line-height: 1.2;
}
a:link, a:visited {
color: #03c;