options: fix up vertical spacing

issues:
1. there is extraneous padding between sections in some cases (i.e. when the top or bottom element has top or bottom margin). Solution: don't apply top margin for top element or bottom margin for bottom element.
2. the top section h3 on each top level options page jiggles when you switch to that page (each has a different vertical alignment relative to the page title). Solution: set vertical alignment of sections on the section h3 rather than section content (content will in turn align to h3 baseline).
3. the security button on the advanced page is too close to the checkbox. Solution: add .section-group div.

BUG=none
TEST=manual


Review URL: http://codereview.chromium.org/8344027

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@106378 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 22 insertions, 7 deletions

diff --git a/chrome/browser/resources/options/advanced_options.css b/chrome/browser/resources/options/advanced_options.css
index e2b6188..8e271ae 100644
--- a/chrome/browser/resources/options/advanced_options.css
+++ b/chrome/browser/resources/options/advanced_options.css
@@ -4,12 +4,12 @@
  * found in the LICENSE file.
  */
 
-#advancedPage > section > div:only-of-type > div.checkbox {
-  margin: 10px 0;
+#advancedPage .section-group:not(:first-child) {
+  margin-top: 10px;
 }
 
-#advancedPage .section-group {
-  margin: 10px 0;
+#advancedPage .section-group:not(:last-child) {
+  margin-bottom: 10px;
 }
 
 #advancedPage select,
diff --git a/chrome/browser/resources/options/advanced_options.html b/chrome/browser/resources/options/advanced_options.html
index 4e05875..4e344a8 100644
--- a/chrome/browser/resources/options/advanced_options.html
+++ b/chrome/browser/resources/options/advanced_options.html
@@ -184,8 +184,10 @@
   <section>
       <h3 i18n-content="advancedSectionTitleSecurity"></h3>
       <div>
-        <div><button id="certificatesManageButton"
-            i18n-content="certificatesManageButton"></button></div>
+        <div class="section-group">
+          <button id="certificatesManageButton"
+              i18n-content="certificatesManageButton"></button>
+        </div>
         <div class="checkbox">
           <label>
             <input id="sslCheckRevocation" type="checkbox">
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index fa009f6..d6dc054 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -268,6 +268,14 @@ section > div:only-of-type {
   -webkit-box-flex: 1;
 }
 
+/* Don't allow edge margin on the first/last child of a section. */
+section > h3 + * > *:last-child {
+  margin-bottom: 0;
+}
+section > h3 + * > *:first-child {
+  margin-top: 0;
+}
+
 .option {
   margin-top: 0;
 }
@@ -580,10 +588,15 @@ html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled {
 /* right table column containing settable options */
 .displaytable > section > h3 + div,
 .displaytable > section > h3 + table {
-  padding-top: 17px;
   padding-bottom: 20px;
 }
 
+/* Setting the padding on the header so the alignment doesn't depend on the
+ * contents of the right table column.  */
+.displaytable > section > h3 {
+  padding-top: 17px;
+}
+
 .displaytable > section > * {
   display: table-cell;
   vertical-align: baseline;