title: nested element inheriting parent Div's margin in ie7
body: <p>Trying to figure out why in IE7, the nested input element is taking on the margin of the parent div. So in essense the margin is being doubled.</p>
  
  <pre><code>    &lt;style&gt;
      &lt;!--
      h1.redsubhead{font-size:14px;}
      .accountInfo,.loginInfo{-moz-border-radius: 6px 6px 6px 6px;background: #EBFBFF; border: 1px solid #8DCAD9;margin-bottom: 30px;padding:10px;}
      #ai_pw_wrap,#li_pw_wrap{border:1px solid #f0f;margin-right: 30px;padding:0;}
      #ai_email_wrap{margin-right:30px;padding:0;}
      .ai_wrap,.li_wrap{float:left;}
      .ai_email_input, .li_email_input,.li_pw_input{width:170px;}
      .ai_pw_input{width:130px;}
      .ai_label,.li_label{font-size: 11px; font-weight: bold;}
  
  
      .ai_link,.li_link{font-size: 9px; float:right}
       h1.redsubhead{float:left;}
       #li_btn_wrap{margin-top:10px;float:right;}
       .ai_wrap input{margin:0 !important;}
       .ai_label{margin:0}
      --&gt;
      &lt;/style&gt;
      &lt;div class="accountInfo"&gt;
        &lt;h1 class="redsubhead"&gt;Account Info&lt;/h1&gt;
        &lt;a class="ai_link" href="#"&gt;Returning Member Login&lt;/a&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
  
        &lt;div id="ai_email_wrap" class="ai_wrap"&gt;
     &lt;label for="edit-payment-new-card-cc-cardholder" class="ai_label"&gt;E-mail: &lt;/label&gt;&lt;br&gt;
     &lt;input type="text" class="ai_email_input" value="John Doe" size="60" maxlength="128"&gt;
        &lt;/div&gt;
  
        &lt;div id="ai_pw_wrap" class="ai_wrap"&gt;
     &lt;label for="edit-payment-new-card-cc-cardholder" class="ai_label"&gt;Password: &lt;/label&gt;&lt;br&gt;
     &lt;input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128"&gt;
        &lt;/div&gt;
  
        &lt;div  id="ai_pwc_wrap" class="ai_wrap"&gt;
     &lt;label for="edit-payment-new-card-cc-cardholder" class="ai_label"&gt;Password Confirm: &lt;/label&gt;&lt;br&gt;
     &lt;input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128"&gt;
        &lt;/div&gt;
  
        &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="loginInfo hide"&gt;
        &lt;h1 class="redsubhead"&gt;Login&lt;/h1&gt;
        &lt;a class="ai_link" href="#"&gt;New User Signup&lt;/a&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;div id="li_email_wrap" class="li_wrap"&gt;
     &lt;label for="edit-payment-new-card-cc-cardholder" class="li_label"&gt;E-mail: &lt;/label&gt;&lt;br&gt;
     &lt;input type="text" class="li_email_input" value="John Doe" size="60" maxlength="128"&gt;
        &lt;/div&gt;
        &lt;div id="li_pw_wrap" class="li_wrap"&gt;
     &lt;label for="edit-payment-new-card-cc-cardholder" class="li_label"&gt;Password: &lt;/label&gt;&lt;br&gt;
     &lt;input type="text" class="li_pw_input" value="John Doe" size="60" maxlength="128"&gt;
        &lt;/div&gt;
        &lt;div id="li_btn_wrap"&gt;
         &lt;input type="image" src="/img/checkout/li_login.png" class="li_submit" value="start" name="submit_order"&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions?? I did find a fix, if I change the margin-right:30px to padding-right:30px. I still want to know why the margin on the nested input is taking on the margin of the parent div.</p>