技術標籤：程式碼設定margin

今天看部落格,看到一個小夥伴面試位元組時的一個問題.

問題:父元素container的高度為多少?(程式碼如下)

<div class="container">
        <div class="inner"/>
        <div class="inner"/>
</div>

.container {
    border: 1px;
}
.inner {
    margin: 10px;
    height=width: 10px;
}
 

剛看到這道題的時候我直接入坑了,算出的結果為container 的上邊框 1+第一個 inner 的 margin-top10+第一個inner 的高度 10+兩個 inner 間 margin 重疊的 10+第二個 inner 的高10+第二個 inner 的 margin-bottom10+container 底邊框 1=52px.

很顯然這樣的計算結果是錯誤的,我只注意到了兩個 inner 間上下 margin 重疊的問題,忽視了很多很重要的內容.

首先, 父元素 container 的 border 只給了 1px 並沒有給線型(如 solid),這樣的設定等於白寫,不會生效.導致父元素 container 沒有 border

第二,因為父元素沒有 border,且 container 沒有 padding 值,所以 container 下第一個子元素的 margin-top會傳遞給container.導致 container 與第一個 inner 之間沒有距離.同樣第二個子元素的 margin-bottom也沒有碰不到有效的border或者padding.所以第二個 inner 的 margin-bottom值也失效.

所以最終參與父元素 container 高度計算的只有 兩個inner 的高度及兩個 inner 間重疊的 margin,即計算結果為 30px.

有沒有一上來,和我一樣跳進坑裡的小夥伴,還是笨的只有我自己.....

就到這裡啦,繼續加油啦!

努力到無能為力 拼搏到感動自己