为什么一个div高于另一个？

Question

我有两个div漂浮在左边但是由于某种原因，一个比另一个高出来是什么造成了这个？

<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推送div。

Answer 2

此

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

它在div的所有边缘（包括顶部）添加了10px的边距。

编写margin和padding的方式是：

margin: top right down left;

e.g。

/* 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;

你可以在所有前面的div中使用保证金

使用此

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