代码设置margin_css 高度计算你真的会了?!(关于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.

有没有一上来,和我一样跳进坑里的小伙伴,还是笨的只有我自己.....

就到这里啦,继续加油啦!

努力到无能为力 拼搏到感动自己