css - padding - width affecting height

Ok,

Consider the following code:

<div class="grid-container">
    <div class="grid-20 padright">       
        <h3 class="padhalf blue-header">
            This is 20% Wide
        </h3>        
    </div>    
    <div class="grid-80 padleft">
        <h3 class="padhalf blue-header">
            This is 80% Wide
        </h3>
    </div>
</div>

<div style="clear: both; height: 15px;"></div><!-- Just a spacer -->

<div class="grid-container">
    <div class="grid-50 padright">       
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>        
    </div>    
    <div class="grid-50 padleft">
        <h3 class="padhalf blue-header">
            This is 50% wide
        </h3>
    </div>
</div>

And the CSS:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.grid-20 { float: left; width: 20%; }
.grid-50 { float: left; width: 50%; }
.grid-80 { float: left; width: 80%; }

.grid-container {
    margin: 0 auto;
    padding-left: 1%;
    padding-right: 1%;
}
.grid-container:after {
    clear: both;
}

.blue-header {
    background-color: #00f;
    color: #fff;
}

.padhalf {
    padding: 0.5% 0.5% 0.7% 0.5%;
}

.padright {
    padding-right: 1%;
}

.padleft {
    padding-left: 1%;
}

And the JSFiddle: http://ift.tt/1zMZtqm

I don't know why the height of the H3 elements changes when the width changes. Why does the width or padding affect the height?

When the parents are identical width, all is OK. When they are not, the height of the child H3 seems to change proportionately.

Thanks,