CODEWITHSUNDEEP
htmlcssmarginpaddingviewport-units
Dominique Abou Samah
Dominique Abou Samah

Reputation: 61

padding of text when using vw font-size

I am using vw to make a text enlarge according to the browser the page is open in. However, the padding is bigger than expected. I want it to be exactly in the top corner of my page with little to no padding. (I tried padding:0px; with no result). Here's an example:

In HTML:

<heading>some text</heading>

In CSS:

heading{
  font-size:5vw;
  padding:0px;
  margin:0px;
}

Upvotes: 3

Views: 1694

Answers (2)

Matthew Barbara
Matthew Barbara

Reputation: 3962

To get the result you want you can do one of the followings:

1 - use line-height.

<div>some text<br/>line 2</div>

div {
  font-size: 5vmax;
  padding: 0px;
  line-height: 0.75em;
  background:lightgray
}

body {
  margin: 0;
}

https://jsfiddle.net/7sqdnvyh/2/

2 - You can add negative margin to hack around it. 

<div>some text</div>

div {
   font-size:5vw;
   margin-top:-15px;
}

https://jsfiddle.net/7sqdnvyh/1/

Upvotes: 1

Hans
Hans

Reputation: 968

This is likely caused by the fact that most fonts (including system fonts) do not extend completely to the top and the bottom of the bounding box for each glyph. This means that a capital letter won't touch the top of an element even if the element has a height of 1em.

To solve this, you can experiment with your font and see where the tops and bottoms of your letters do fall. This may be different for each font and also depends on how high the ascenders are. Often, the ascenders are taller than the cap height.

For Times New Roman, The following works well for caps:

<span>Foobar</span>

span {
  background: #ddd;
  display: inline-block;
  line-height: .70em;
  vertical-align: text-top;
}

The line to change here is the line-height. Playing around with this should give you the results you need. .70, for example, still clips the "O" a bit.

I recommend making the font much larger than needed, dialing in the line-height, and then shrinking it back down.

span {
  background: #ddd;
  display: inline-block;
  line-height: .70em;
  vertical-align: text-top;
}

body {
  padding: 0;
  margin: 0;
  font: serif;
  font-size: 20vw;
}
<span>FOOBAR</span>

Upvotes: 1

Related Questions