Grids based on Modular Scale: What's more important, baseline font-size or baseline line-height?

I'm trying to understand grids based on modular scales and how to use them in web design. From what I understand, there's two ways to decide a baseline value for your scale...using your baseline font-size (1rem) or using your baseline line-height (1rem * 1.6).

CSS Frameworks like Foundation seem to prefer baseline font-size and will use that value in the grid like so:

.myDiv {
    padding: 1rem;
    margin-bottom: 0.5rem;
}

Other CSS frameworks like Bootstrap seem to prefer baseline line-height and will use that calculated value in their grid like:

// $baselineFontsize is a pixel value like 14px 
// $baselineLineHeight is a unitless number like 1.4 or 1.6

$baseline = $baselineFontsize * $baselineLineHeight;

.myDiv {
    padding: $baseline;
    margin-bottom: $baseline * 0.5;
}

// or, based on em:

.myDiv {
    padding: 1em * $baselineLineHeight;
    margin-bottom: 1em * $baselineLineHeight * 0.5;
}

What are the main differences between using font-size vs. line-height as your baseline? What are the advantages and disadvantages of each? Will they lead to a distinct looks?