0

I was trying to figure out why the page title looked uneven at the bottom.

pagetitle

I made the containing element 

#pageTitle {
    background-color: rgba(6, 6, 6, 0.85); 
    margin:0;
    padding: 0 12px;
    width: 100%; }

and the h1 

#pageTitle h1 {
    color: #93d9f5;
    font-family: 'MyriadWebPro Condensed';
    font-weight: lighter;
    margin: 0;
    text-transform:uppercase; }

A coworker mentioned that some fonts contain extra padding at the bottom. How can I find that measurement, and work around it to make it look even?

JGallardo
  • 11,074
  • 10
  • 82
  • 96

3 Answers3

1

There is no padding (in CSS terms at least) added by the font. Instead, different font designs uses the space between the bottom of the font and the top of the font differently, generally leaving some base below the text baseline and above the height of capital letters, for example. The amounts of space need not be equal. For example, if you used Verdana, there would be more space above than below. With MyriadWebPro, apparently the opposite.

There are different ways to deal with this: you could use relative positioning (moving the content a few pixels up or down), or vertical-align, or padding. Normally padding would appear to be simplest and most robust. But note that it increases the total height of the element box.

Your padding setting sets horizontal padding of 12px and explicitly sets vertical padding to zero. You would need to set of one of the vertical margins, bottom or top, depending on whether you wish to move letters up or down. In your case, you could try first

 padding-top: 2px;

The proper values inevitably depend on the font.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Or just simply edit the shorthand: `padding: 2px 12px 0px;` – marcias Jul 30 '13 at 09:16
  • Your answer does work, so I upvoted for being helpful, thanks. However, what I was trying to do was not add padding to the top. Because the designers specs were automatically met on the top, but the bottom had additional space. And that space is what I wanted to measure and get rid of. – JGallardo Jul 30 '13 at 20:59
1

You may manipulate the line-height and vertical-align properties (particularly line-height) of your container and h1 tag to eliminate the 'padding' effect of a font that has a line-height that is larger than you desire.

http://jsfiddle.net/bYB7Q/2/ for an example

michaelward82
  • 4,706
  • 26
  • 40
0

It appears you're padding the 12px on the right, not the bottom. Without seeing the other CSS it's difficult to tell just why it's cutting off like that. Do you have a set page / container height? That would take precedence here.

Pamela Hazelton
  • 66
  • 2
  • neither the page nor container have a set height. And I inspected with Firebug and still found nothing. Chris brought up a good point about the space being there to accommodate lowercase letters, but the challenge now is to measure that and compensate for it since I am only using uppercase letters anyways. – JGallardo Jul 30 '13 at 03:41
  • By the way Pamela, the rule that I wrote adds padding to the right and left. https://developer.mozilla.org/en-US/docs/Web/CSS/padding – JGallardo Jul 30 '13 at 21:03