How to calculate Line-Height in CSS

greetings asp_net2, , I looked at your CSS with the heading (<h1>, etc) display font factors set. And your question asks about having a formula for getting a correct line height, in relation to some " baseline grid ".
I am wondering about how someone would try and use this formula thing you have copied and pasted for a better "Visual Display" in the headings, , AND not going to the trouble of viewing a Particular WEB PAGE, and just adjusting the formula values to change , size, and move the different elements ( h1, h2, h3 ) to sizes and positions that suit your particular page layout as an "Artistic" pleasing arrangement, never mind any " baseline grid " that is used to see the mathematical positioning.
So If you just want it to look better on your " baseline grid " , to line up , then slightly adjust the line height for a mis aligned element

change -
    line-height    : (48 / 48);

to
    line-height    : (48 / 46);  

or to
    line-height    : (48 / 50);  

and see if that works better for your personal artistic evaluation of the page arrangement, as far as my opinion, these formula value results, are much to big, for any display I would consider useful. I would think the sizing and arrangement is a Subjective opinion, not a mathematical certainty.

I wonder what you think is so bad about the usual DEFAULT sizing of the headings, that you go to this trouble to change them all , , , to a large degree?

The sizes that i included were from a website that talked about line-height, margin-top, margin-bottom and baseline grid. My question was how do you determine line-height, margin-top, and margin-bottom for headings.

Take a look at this article and maybe that will help you understand what I'm referring to :)

http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

? ? ?

I have already looked at that site for - "how-to-set-up-a-baseline-grid/", and the other site for the grid system.

But you do not understand what he is trying to tell you on the -
   http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

site, , He gives you some general "guidelines" for consideration, to take a "Look" at how your special web site (Not EVERY website), has its FONT presentation in the stacking of various different height-size Lines, to LOOK GOOD!

As he says -
"The basic premise behind a baseline grid is to align all text on a web­site so that it flows smoothly"
     this is Subjective opinion, and will be different on web sites that use  Titles  and  Headings  in different sizes and positioning to suit the graphical "Layout" that the site art department has created for that site.

Then he says =
"I like to use the fol­low­ing scale: 16, 18, 21, 24, 36, 48."

But, this is just his "Example" as a "Demo", choice of font sizes (like I said, I think they are Too Big for a generalized web site use) . .

He says - "The gen­eral rule of thumb for read­able text is that your line-height should be 1.4 to 1.5 times that of your font-size". .

Please notice that this is his "generalized" opinion for a beginning "formula" to change and test on your site, until you get the metrics you need the font-size, line-height, margin-spacing, for your special Site, not the generalized, one size fits all formula.

He ends up saying - "It can be quite a chal­lenge work­ing with ems", which to me means, you change the math -
/* 48 / 48 */
for ALL of the font metrics, to get a display that works on your site layout.

For the most part, unless you have a really picky art department, and have artistic concerns for the relationships of Titles, and Headings, then there are NOT concerns for the "typo­graphy" consistency on various devices. So you may not have any advantage in going to this trouble. You seem to not be able to view your site, and determine fine adjustments, to have the titles stacking "flow smoothly", by changing the em, to -

h2 {
    font-size: 2.1em;
    line-height: 1.15em;
}

and change again, until it is a great presentation. You don't really need the math, you can just adjust the metrics , lower or higher, until you get a result, but unless you have concerns or problems "artistically" for your Topo , then this may not improve your site presentation?

So basically your saying there is "no particular" formula for calculating line-height, margin-bottom and margin-top for headings or body copy for that matter? Your saying it's up to the artist on what they think looks best?

Yes, it's about "what they think looks best? "  for their site layout and arrangement, , , but the article you reference also says this, but not directly, as he uses - "The gen­eral rule of thumb", instead of saying "Always use this". . .
I think the real purpose, or main point, of that article, is to Never use the static Pixel (px), for topographic metrics such as -
<style>
h2 {font-size: 29px;}
</style>

instead always use a form of the "relative" element measurement (em) -
<style>
h2 {font-size: 1 .782em;}
</style>

because the em unit can respond to the topographic font setting for different values that a browser (notebook, tablet, phone) can have (default font size may NOT be 16px).

The article goes on about the "Line Height", and changing this in the headings, which are usually used as article "Titles" and have just One Line of text , , However, if you actually change the line-height in any element, then there are several changes in the appearance, and organization of the text for that display, which he seems not to consider. And you see this when you use the - "how-to-set-up-a-baseline-grid/" on your page, and the overlay grid lines, no longer seem to match as you think they should when you use his "Default" measurement changes, and most of that is because of the line-height changes.
Line height change, CAN be used to move the display position UP and DOWN for some elements, and in multi line Text display, it changes the distance between the lines.
I will tell you of my opinion, since you are seeking opinions on this. I use the percentage for most Font Size adjustments -
<style>
h2 {font-size: 150%;}
</style>

Next, if appropriate, I use the em, , which is about equivalent to the em use as -
<style>
h2 {font-size: 1.5em;}
</style>

both of these respond to the changes in the device font, or viewer browser settings, BUT if I use -
    font-size: 24px;
then it will NOT respond.
As I said the defaults for the H1 , H2 , H3 etc. are good for most sites, But these headings (h1, h2, h3) are not really used much, in an artistic or "Fancy" site layout, on these, a special graphical <div> class CSS are used to have the article or section "Titles" standout as visually different , as example-

<style>

.titleArt{
display: inline-block;
position: relative;
top: 14px;
font-family: dominion,arial,sans-serif;
font-weight: bold;
font-size: 138%;
color: #fcdfb4;
background: #9cf url(images/title4.png);
border: 2px solid #ffdb90;
border-radius: 7px;
padding: 2px 9px;
margin: 1px auto;
z-index: 1;}

</style>

Select allOpen in new window

this one does not need to change the line height, but some positioning does need to change the line height.