Почему один div выше другого?

Question

У меня эти два divs плавают влево, но почему-то выходит выше, чем другой Что вызывает это?

<style type="text/css"> 
    ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 
    .address-summary { 
     float: left; 
     margin: 10px; 
    } 
</style> 

<h2>CheckoutSummary</h2> 

<div> 
    <div class="address-summary"> 
     Shipping To: 
     <ul> 
      <li>@Model.ShippingAddress.Street</li> 
      <li>@Model.ShippingAddress.City, @Model.ShippingAddress.State @Model.ShippingAddress.Zip</li> 
      <li>@Html.DisplayFor(m => m.ShippingAddress.Phone1)</li> 
     </ul> 
     <div class="clear-fix"></div> 
    </div> 
    <div> 
     Billing To: 
     <ul> 
      <li>@Model.BillingAddress.Street</li> 
      <li>@Model.BillingAddress.City, @Model.BillingAddress.State @Model.BillingAddress.Zip</li> 
      <li>@Model.BillingAddress.Phone1</li> 
     </ul> 
     <div class="clear-fix"></div> 
    </div> 
</div> 

Answer 1

У вас есть margin вокруг .address-summary, который толкает Див вниз.

Answer 2

это

.address-summary { 
     float: left; 
     margin: 10px; <<<<< 
    } 

Это добавление запас 10px по всем краям DIV (в том числе и сверху).

Способ margin и padding написаны является:

margin: top right down left; 

например,

/* Div has 10px margin all around: */ 
margin: 10px; 

/* Applies 10px to top and bottom margin, and 15px to left and right margins: */ 
margin: 10px 15px; 

/* Applies 10px margin to top, 15px to both left and right, and 12px to bottom: */ 
margin: 10px 15px 12px; 

/* Apples 10px to top, 15px to right, 12px to bottom, and 13px to left: */ 
margin: 10px 15px 12px 13px; 

Answer 3

потому что ваш запас: 10px;

с запасом, что вы делаете во всем фронте ваш сНу

использовать этот

margin-left: 10px; 
margin-right: 10px;