Today I was looking at how to get and set padding/margin values for DOM elements. I’m looking more into the specific location of the outer margins and paddings. As you may know, it’s possible to set an elements padding and margin using CSS, but getting the correct values can be problematic.

//sets
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");

Common sense, you would think this would work, but doesn’t seem to.

//gets
$("div.header").css("margin");
$("div.header").css("padding");

Try it yourself (paste code below into Firebug). You’ll see empty values returned for margin and padding. Maybe I’m missing something here?

(function($){

function logMarginPadding(elem)
{
//gets
var margin = elem.css("margin"),
padding = elem.css("padding");
console.log("margin="+margin+" padding="+padding);
}

var elem = $("div.header"); //set the element to inspect

logMarginPadding(elem);
//sets
elem.css("margin","10px");
elem.css("padding","10px");
logMarginPadding(elem);

})(jQuery);

This seems to work.

//get top margin of element
alert($("div.header").css("margin-top"));

//get top margin of element as integer value
alert($("a").css("margin-top").replace("px", ""));

//if using it with a calculation you must convert it to an integer
parseInt($("a").css('padding-left').replace("px", ""));

Anyways, this is how I got the padding for the element. Not ideal and only works if the padding is uniform (same on each side) Simply get the width and outer width divided by 2.

var item = $('div.header');
width = item.width(),
padding = (item.outerWidth()-width)/2;

There is pretty popular plugin called jsizes which may a good solution to getting/setting margin/padding values on elements.

JSizes is a small plugin for the jQuery JavaScript library which adds support for querying and setting the CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties.

Further readings
jQuery has the funtions outerWidth and outerHeight which include the border and padding by default, and also the margin if the first argument of the function is true
http://api.jquery.com/outerHeight/
http://api.jquery.com/outerWidth/

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Lorenz

    margin is a shorthand property for margin-top, margin-left, …
    Those cannot be read with jQuery. Anyhow, it wouldn’t make any sense. What do you want with a string like “4px 3px 6px 3px” ?

    Cheers
    Lorenz

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.