$('h1').css('padding-left', '2%');
$('h1').css('padding-right', '2%');
$('h1').append('<b>!!</b>');
var h1OuterWidth = $('h1').outerWidth();

$('h1').css('margin-top', '5%');
$('body').prepend('<b>--!!--</b>');
var h1Offset = $('h1').offset();

console.log(h1OuterWidth, h1Offset);


// preferowana jest ta metoda w celu uniknięcia wymuszania wykonywania
// przez przeglądarkę ponownych operacji rysowania:
$('h1').css({
    'padding-left': '2%',
    'padding-right': '2%',
    'margin-top': '5%'
}).append('<b>!!</b>');
$('body').prepend('<b>--!!--</b>');

var h1OuterWidth = $('h1').outerWidth();
var h1Offset = $('h1').offset();

console.log(h1OuterWidth, h1Offset);