Font-size: Leave a font 100% DIV size

Question

I’m creating banners for printing and came across a problem.

I need to define a fixed height and widht div, for example:

#papel {width: 297mm;height: 210mm;border:1px solid red}

Inside this div, I have a SPAN

#papel span{font-size: 9vw;border:1px solid red;font-family:Arial;}

The problem is this: My text fits inside the DIV, but the element generates an edge around my text, leaving the DIV.

Is there a way for my Span to take up 100% of the DIV ? I would like the text to take up all the DIV space without going over it with the edge.

Follow code siples for demonstration:

#papel {width: 150mm;height: 30mm;border:1px solid red;}

#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;}

<div id="papel">
	<span>RES</span>
</div>

Thanks in advance =D

Answer 1

First of all

Your premise is incorrect, your text does not fit in div. Your choice of letters may have given this illusion, see a better example:

#papel {width: 150mm;height: 30mm;border:1px solid red}

#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;}

<div id="papel">
	<span>ÇÃj</span>
</div>

Changing the behavior of span and of div

An alternative is to let the row size div (or the row size div) become equal.

Also, if you want more control, you better treat the span as a block.

#papel {width: 150mm;border:1px solid red}

#papel span{display:block;font-size: 19vw;border:1px solid green;font-family:Arial;}

<div id="papel">
	<span>RES ÇÃj</span>
</div>

Defining height with line-height

If you want to ignore the accents and the letters that go past the baseline, as left in the comment, you can adjust the line size of the div:

#papel {width: 150mm;height:30mm;border:1px solid red;overflow:hidden}

#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}

<div id="papel">
	<span>RES ÇÃj</span>
</div>

If, in the example above you do not want to cut the seats completely, remove the overflow:hidden.

#papel {width: 150mm;height:30mm;border:1px solid red}

#papel span{font-size: 19vw;border:1px solid green;font-family:Arial;line-height:30mm}

<div id="papel">
	<span>RES ÇÃj</span>
</div>

Note that what is valid in these last two examples is exactly the line-height, causing the source to align to the space that has, thus, what "leak" (or what is cut) will not interfere in the spaces of the neighboring elements.

Note: I think the easiest thing would be to simply specify the height of the source in millimeters even, I don’t know if it makes any sense to use vw for paper measurements.

Answer 2

In this case you just set the height to 100% and exchange the span for a div

#papel {width: 150mm;height: 30mm;border:1px solid red;}

#papel div{font-size: 16vw;border:1px solid green;font-family:Arial; height: 100% }

<div id="papel">
	<div>RES</div>
</div>