Question

Browsers have default padding for HTML page.
For example my FF sets 8px margin of body element by default.
I can calculate default width padding for HTML page using

jQuery(window).width() - jQuery('body').innerWidth();

due to body element spans all available browser viewport width.
Also I have other browser which sets different values for width and height padding.
Could you propose way to calculate height padding?
Previous code will not work due to body inner height will return actual page content height and will not span all available height.

Answer 1

Do you really need to calculate the padding? The padding is defined in an element’s css setting for padding and margin.

You can get these easily in jQuery:

// Select the body element.
var bodyElement = $('body');

// Get the paddings
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');

// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');

You can remove the default user-agent (i.e. the browser’s) settings by defining in your css file:

body {
    margin: 0;
    padding: 0;
}