Switch from margin to padding for checkboxes and radio buttons.

chrome/browser/resources/shared/css/chrome_shared2_touch.css

Index: chrome/browser/resources/shared/css/chrome_shared2_touch.css
diff --git a/chrome/browser/resources/shared/css/chrome_shared2_touch.css b/chrome/browser/resources/shared/css/chrome_shared2_touch.css
index 858da24d639efd18fc9127e1626ff3fe6ac21125..5712c04c405c83ae0a7545dde0b8b1b1da95f6e8 100644
--- a/chrome/browser/resources/shared/css/chrome_shared2_touch.css
+++ b/chrome/browser/resources/shared/css/chrome_shared2_touch.css
@@ -14,16 +14,17 @@ input[type='search'] {
   padding-top: 6px;
 }
 
-/* Additional padding to disambiguate controls on neighboring rows.
- * Ideally, the margin belongs on input[type=radio|checkbox] to be a more
- * general fix; however, this creates baseline problems as webkit is not
- * currently able to reconcile the baseline of a text-free inline box
- * containing a margin and fixed dimensions with neighboring content.
- * TODO(kevers): Reinvestigate once the baseline adjustment properties in
- * CSS3 are supported. */
+/* Margins are not touchable.  Use padding on the inner label instead to
+  increase the size of the touch target. */
 .checkbox,
 .radio {
-  margin: 12px 0;
+ margin: 0;
+}
+
+.checkbox label,
+.radio label {
+  padding-bottom: 7px;
+  padding-top: 7px;
 }
 
 li > button.link-button {