Space related margin on Chrome.

by mark69_fnd

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
</head>
<body>
<form>
  <div class="fieldset a3">
    <div class="legend">Address Info</div>
    <br/>

    <div class="fieldset a2">
      <div class="legend">Addresses</div>
      <br/>

      <div class="fieldset a1">
        <div class="legend">Bill To</div>
        <p/>

        <label for="billTo_name">Name</label><input type="text" id="billTo_name"/>
      </div>
      <div class="fieldset a1">
        <div class="legend">Ship To</div>
        <p/>

        <label for="shipTo_name">Name</label><input type="text" id="shipTo_name"/>
      </div>
    </div>
  </div>
</form>
</body>
</html>

CSS

html, body {
    height: 100%;
}

/* START Immitate fieldset and legend */
div.fieldset, div.legend {
    display: inline-block;
}

.fieldset {
    border: 2px groove threedface;
    margin-top: 1em;
    padding: 0px 15px 0px 15px;
}

.fieldset > div:first-child {
    text-align: left;
    margin-left: 10px;
    padding: 0px 5px;
    background: white;
    position: relative;
    top: -0.7em;
}

/* END Immitate fieldset and legend */

label {
    width: 4em;
    float: left;
    text-align: right;
    display: block;
    margin-right: 0.5em;
}

p {
    line-height: 2em;
}
.a1 {
background-color: red;
}

.a2 {
background-color: yellow;
}

.a3 {
background-color: green;
}