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.


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


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 logMarginPadding(elem)
var margin = elem.css("margin"),
padding = elem.css("padding");
console.log("margin="+margin+" padding="+padding);

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



This seems to work.

//get top margin of element

//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

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” ?


Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.