jquery.baseline.js

HTML

<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>
    <img src="http://placekitten.com/g/460/360" alt="test" />
</p>
<p>Lorem ipsum dolor</p>
<p>
    <img src="http://placekitten.com/g/60/60" alt="test" />
</p>
<p class="big">Lorem ipsum dolor</p>
<p class="big">
    <img src="http://placekitten.com/g/15/15" alt="test" />
</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>
    <img src="http://placekitten.com/g/48/48" alt="test" />
</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<div class="table">
    <table>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor</td>
                <td>Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor</td>
                <td>Lorem ipsum dolor</td>
            </tr>
        </tbody>
    </table>
</div>
<p>Lorem ipsum dolor</p>
<div class="big">
    <p>Lorem ipsum dolor</p>
    <p class="small">Lorem ipsum dolor</p>
</div>
<p>Lorem ipsum dolor</p>
<div class="big">
    <p>Lorem ipsum dolor</p>
    <p class="small"><img src="http://placekitten.com/g/80/80" alt="test" /></p>
</div>
<p>Lorem ipsum dolor</p>

CSS

body
{
    line-height: 1.5em;
    padding: 1.5em 1.5em 0;
    background-repeat: repeat;
    background-position: 50% 0;
    background-image: url(http://www.baselineme.com/24);
    background-color: #F9F4E2;
}
p,
.table
{
    margin-bottom: 1.5em;
    background-color: rgba(221, 12, 123, 0.5);
}
.big
{
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 0.5em;
}
.big p
{
    margin-bottom: 0.5em;
}
.small
{
    font-size: 0.75em;
    line-height:   0.666666em;
    margin-bottom: 0.666666em;
}
img
{
    display: block;
}
td,
th
{
    border: 1px solid grey;
    padding: 0.75em;
}

JavaScript

(function($){
    $.baseline = function(el){
        var  pre = '#id-',
            unit = 'em',
             txt = '&nbsp;',
             box = '<div />',
            prop = 'min-height';
            rand = Math.floor(Math.random() * 10000),
            elem = jQuery(box).attr('id', pre.substr(1) + rand).append(txt),
            base = $(el);

        base.after(elem);
        
        var    test = jQuery(pre + rand),
            hTestPx = test.height(),
            hBasePx = base.height();
        
        test.height(1 + unit);
        
        var hTestEm = test.height();
        
        test.remove();
        
        var remainder = hBasePx % hTestPx,
             division = (hBasePx - remainder) / hTestPx,
              hBaseEm = hTestPx / hTestEm;
        
        if(remainder != 0)
        {
            var result = (division + 1) * hBaseEm + unit;
            
            if($.browser.msie && parseInt($.browser.version, 10) == 6)
                base.parent().height(result);
            else
                base.parent().css(prop, result);
        }
        
    };

    $.fn.baseline = function(){
        return this.each(function(){
            (new $.baseline(this));
        });
    };

})(jQuery);


jQuery(function(){
    $('img, table').baseline();
});