Space between letter and end of element?

Question

I created a fiddle for my problem: https://jsfiddle.net/e45gpw2a/

.text {
  font-size: 100px;
  font-family: Helvetica;
}

<div>
  <p class="text">
    PR
  </p>
</div>

As you can see in the inspector http://d.pr/i/CBFyZh there is a space between the beginning of the letter and the end of the paragraph element, but no padding is defined.

Is there a chance to remove that space or is this font related and not really solvable?

I would say it's font related. You should experiment with negative padding or margin — Patrick Hund, Oct 02 '17 at 15:15
I have set letter and word-spacing and is still with that space... — Renzo Calla, Oct 02 '17 at 15:16
Ya.. it looks like the default spacing *within* the font itself. Temporarily try a different font to see if you still get the same issue — ProEvilz, Oct 02 '17 at 15:18
@torben ...? So have you tried the font change suggestion to rule out whether it is or isn't a font specific issue? — ProEvilz, Oct 02 '17 at 16:14

Andrew Bone · Answer 1 · 2017-10-02T15:53:30.887

0

You can add a margin: 0; to your CSS.

By default <P> tags have margin: 1em 0px which means a margin of 1 line (100px in this case) above and below the tag and a margin of 0 on either side.

.text {
  margin: 0;
  font-size: 100px;
  font-family: Helvetica;
}

<div>
  <p class="text">PR</p>
</div>

As for the spacing between the letters, there is always a small about of space before a character, this may vary between fonts but it is always there. The larger your font the larger the gap.

You can not change this gap for the first character but for all following characters, you can use letter-spacing with a negative pixel value to reduce the gap.

.text {
  letter-spacing: -12px;
  font-size: 100px;
  font-family: Helvetica;
}

<div>
  <p class="text">PR</p>
</div>

Hope this helps

edited Oct 02 '17 at 15:53

answered Oct 02 '17 at 15:30

Andrew Bone

7,092
2
18
33

Your example has the same problem and you explained yourself that the default margin on the right is 0 – SourceOverflow Oct 02 '17 at 15:46
I see, so the complaint is about the space between the letters? This, of course, is not a "problem" but rather by design. The larger the font the bigger the gap for readability. – Andrew Bone Oct 02 '17 at 15:50
@AndrewBone Exactly. This was my question, if this is a kind of default behaviour. So basically I can only correct the position, by doing a position:relative; left:-5px; – Torben Oct 02 '17 at 15:52
@Torben I've added a little more detail – Andrew Bone Oct 02 '17 at 15:54

Space between letter and end of element?

1 Answers1