For modern skin:

Bug #46348, 22960 --> fix expensive style rules to make the message header pane faster,
fix vertical alignment problem between header values by forcing our html tags to
have 0 margins (they were inheriting a default margin size)
Bug #47681 Force proper alignment of the header names in the message pane.
r=alecf

themes/modern/messenger/msgHdrViewOverlay.css

@@ -32,16 +32,19 @@ mail-emailaddress {
   display: inline;
 }
 
+
 [hide] {
   visibility: collapse;
 }
 
-spring.buttonTopSpacer     { height: .3em; }
-spring.buttonSpacer        { width: .5em; }
-box.headerBox              { overflow: hidden; min-width:50px;}
-box.header-part1           { background-color: #EEEEEE; border: none; }
-box.header-part2           { background-color: #CCCCCC; border: none; }
-box.header-part3           { background-color: #CCCCCC; border: none; }
+.buttonTopSpacer     { height: .3em; }
+.buttonSpacer        { width: .5em; }
+.headerBox              { overflow: hidden; min-width:50px;}
+.header-part1           { background-color: #EEEEEE; border: none; }
+.header-part2           { background-color: #CCCCCC; border: none; }
+.header-part3           { background-color: #CCCCCC; border: none; }
+
+.headerValueBox { width: 7.4em; text-align: right;}
 
 #addToAddressBookButton {
 	list-style-image:url("chrome://messenger/skin/addtoab.gif");
@@ -55,35 +58,36 @@ box.header-part3           { background-color: #CCCCCC; border: none; }
   margin: 0px;
 }
 
-image.emailDisplayImage
+.emailDisplayImage
 {
   align: right;
   display: inline;
 }
 
-text.emailSeparator {
+.emailSeparator {
   display: inline;
 }
 
-text.emailDisplayButton {
+.emailDisplayButton {
   color: blue;
   text-decoration: underline;
   cursor: pointer;
   max-height: 15px;
   display: inline;
+  orient: horizontal;
 }
 
-image.showMoreAddressesButton {
+.showMoreAddressesButton {
   list-style-image:url("chrome://messenger/skin/more.gif");
   display: inline;
 }
 
-image.showFewerAddressesButton {
+.showFewerAddressesButton {
   list-style-image:url("chrome://messenger/skin/less.gif");
   display: inline;
 }
 
-html.headerValue   { white-space: normal; min-width: 50px; }
+html.headerValue   { white-space: normal; min-width: 50px; margin: 0px;}
 html.subjectvalue      {font-weight: bold;}
 
 text.headerdisplayname { font-weight: bold; margin-right: .5em; margin-left: .5em; min-height: 18px }