CODEWITHSUNDEEP
htmlcss
erwor1312
erwor1312

Reputation: 11

How to remove white space from both sides of span?

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/

Upvotes: 0

Views: 517

Answers (3)

Temani Afif
Temani Afif

Reputation: 273021

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>

Upvotes: 0

Doug
Doug

Reputation: 1515

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>

Upvotes: 1

hetious
hetious

Reputation: 803

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/

Upvotes: 1

Related Questions