Difference between two element styles with Google Chrome

I use Google Chrome developer tools and I am constantly inspecting one element against another back and forth to find out what may be causing a particular styling issue.

It would be nice to compare the differences in style between element 1 and element 2.

Can this be done with chrome currently or via some workaround? Is there a tool out there that can do what I am looking for?

Current example of style difference is that I have an inline H4 next to a A where the A is appearing higher in vertical alignment. I am not seeking a solution in this question as I will sort it out.

---

Update: As a result of this discussion, the "CSS Diff" Chrome extension was created.

---

Great question and cool idea for extension!

Proof of concept

As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via 'inspect element' button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I've created a small snippet that compares last two inspected elements:

(function(a,b){    
	var aComputed = getComputedStyle(a);
	var bComputed = getComputedStyle(b);

	console.log('------------------------------------------');
	console.log('You are comparing: ');
	console.log('A:', a);
	console.log('B:', b);
	console.log('------------------------------------------');

	for(var aname in aComputed) {
		var avalue = aComputed[aname];
		var bvalue = bComputed[aname];

		if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
			continue;
		}
		
		if( avalue !== bvalue ) {
			console.warn('Attribute ' + aname + ' differs: ');
			console.log('A:', avalue);
			console.log('B:', bvalue);
		}
	}

	console.log('------------------------------------------');
})($0,$1);

How to use it?

Inspect two elements you want to compare, one after another, and paste the code above to console.

Result