How to remove white space from both sides of span?

Question

I have this piece of code:

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}
.title .big {
  font-size: 250px;
}

.title .small {
  font-size: 60px;
}

<div class="title flex">
  <span class="big">1</span>
  <span class="small">st</span>
</div>

How to remove the massive white space around the first span?

This is what I want to accomplish: Image1

But this is what I have due to that massive white space: Image2

JSFiddle: https://jsfiddle.net/vmn3bz0k/

I know that I can make them closer by changing position and other things. But I'm more interested in a way that I can remove that whitespace. That'd make responsive design easier. — erwor1312, Dec 28 '18 at 14:30
Possible duplicate of https://stackoverflow.com/questions/31797927/remove-a-white-space-between-spans — Rob, Dec 28 '18 at 21:13

score 1 · Answer 1 · answered Dec 28 '18 at 14:21

1

For example you can use position relative, and move the second span closer to the first one. Something like:

.title .small {
  font-size: 60px;
  position:relative;
  left:-40px;
}

Fiddle: https://jsfiddle.net/vmn3bz0k/1/

answered Dec 28 '18 at 14:21

hetious

793
1
8
14

score 1 · Answer 2 · answered Dec 28 '18 at 14:23

1

There are a lot of potential answers to this question :) My normal path would be to set the display of the first span to display: inline-block so you can set the width of the that span.

You can also play with negative margins on either span if you'd like to control it that way.

Or @hetious has a good solution too!

I'm sure there are several other ways you can approach this. Happy coding!

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}
.title .big {
    font-size: 250px;
    display: inline-block;
    width: 75px;
}

.title .small {
    font-size: 60px;
}

<div class="title flex">
  <span class="big">1</span>
  <span class="small">st</span>
</div>

answered Dec 28 '18 at 14:23

Doug

1,435
1
12
26

You are right, there are many possibilities to get this effect :) – hetious Dec 28 '18 at 14:25
One of the reasons I love code :D I do really like your solution. I just blasted out the first thing that popped in my mind. – Doug Dec 28 '18 at 14:27
So there's no way to remove the white space? I'm more interested in that, that'd make it easier for when it needs to be resized for a responsive design. – erwor1312 Dec 28 '18 at 14:29
Kind of a yes and no answer -- the problem is the font-family that you're using. The white space you're running into is a product of values set by the font. If you don't want to mess with display or position you can use `letter-spacing: -180px` or whatever value you find appropriate. That takes the problem straight to the font, but I would test it a bit ensure expected display. – Doug Dec 28 '18 at 14:34
You can also check out the CSS for `font-kerning` but it doesn't have IE/Edge support: https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning – Doug Dec 28 '18 at 14:38

score 0 · Accepted Answer · answered Dec 28 '18 at 16:18

Adjust the vertical alignment, the line-height and letter spacing to control the space:

.title span {
  font-family: 'Gill Sans MT Pro Condensed', 'Gill Sans MT', 'Gill Sans';
}

.title .big {
  font-size: 250px;
  line-height:0.9em;
  letter-spacing:-0.2em;
}

.title .small {
  font-size: 60px;
  vertical-align: top;
}

<div class="title flex">
  <span class="big">1</span>
  <span class="small">st</span>
</div>

How to remove white space from both sides of span?

3 Answers3