JavaScript Guides Advanced

JavaScript CSS Tool: Convert Margins To Padding

Ever wonder what the source of those mysterious gaps on your webpage is, but Web Developer Extension won't
tell you because it can only inspect padding but not margins? You click on the space, but in vain--Firebug won't tell
you the source element because that gap is caused not by an element's padding but by some errant margin.

Enter "Convert Margins To Padding". Just paste this javascript snippet into the Firebug command line, and it will
replace all elements' padding values with their margin values. Then you can click on the mysterious gap and
discover its element.

var elements = document.getElementsByTagName('*'); for (var i =  0; i < 
elements.length; i++) { elements[i].style.paddingTop =  
document.defaultView.getComputedStyle(elements[i],  '').getPropertyValue('margin-top'); 
elements[i].style.paddingRight =  document.defaultView.getComputedStyle(elements[i],  
'').getPropertyValue('margin-right'); elements[i].style.paddingBottom =  
document.defaultView.getComputedStyle(elements[i],  '').getPropertyValue
('margin-bottom'); elements[i].style.paddingLeft =  
document.defaultView.getComputedStyle(elements[i],  '').getPropertyValue
('margin-left'); elements[i].style.marginTop = '0';  elements[i].style.marginRight = 
'0'; elements[i].style.marginBottom =  '0'; elements[i].style.marginLeft = '0'; }

____

 This article is licenced under the Creative Commons License.

—
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced



[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Guides Advanced -
JavaScript CSS Tool Convert Margins To Padding