2

Hi I have 2 simple headings, an h3 on top of an h2. For some strange reason though there seems to be a 1px gap on the left of the h2 heading. It's driving me mad and I just don't get why it is. The font size of the h2 is 40px where as the font size of the h3 is 12px.

Can someone put me out of my misery with this

Thank you

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}

.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
font-weight: 700;

}
       <h3 class="section-heading-small">Small Heading</h3>
              <h2 class="section-heading-main">Large Heading</h2>
rufus
  • 807
  • 2
  • 11
  • 28
  • 5
    There is no space, that's just empty space that belongs to the first letter - which will depend on the letter itself. If you selct that letter, you see that the selection color extendds to the left border. – Johannes Oct 07 '17 at 21:33
  • You need to keep your heading elements in document order. `

    ` precedes `

    `

     – Rob Oct 07 '17 at 21:44

2 Answers2

3

This is not a problem. The font is designed with a vector spacing But you can display it with the margin-left:-3px; or text-indent:-2px; as desired

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}
.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0 0 0 -3px;
  text-transform: uppercase;
  font-weight: 700;
}
<h3 class="section-heading-small">Small Heading</h3>
<h2 class="section-heading-main">Large Heading</h2>
Farhad Bagherlo
  • 6,725
  • 3
  • 25
  • 47
1

It might be the font weight and size is too big try and reduce the font weight and size

Font-size: 20px; 
Font-weight: 500;
Olafusi Emmanuel
  • 40
  • 2