DIV这种情况下为何被撑大

Question

DIV被撑大，没有设定margin，子元素有margin，本来设定的40PX变成了43，标题栏的高度是40PX却是灰色的，标题栏是一个DIV然后里面有歌曲名，歌手名是一个span有margin：5，下角标是一个span`#musicDetails .detail_tile {

            width: 100%;
            height: 40px;
            background: rgba(41, 171, 266, 0.6);
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            color: white;
        }

        #musicDetails .detail_tile span {
            font-size: 12px;
            margin: 5px;
        }

        #musicDetails .detail_tile .details_tip {
            width: 19px;
            height: 10px;
            background: url(img/details_arrow.png) no-repeat;
            background-size: cover;
            position: absolute;
            right: 20px;
            top: 15px;
        }

`

Answer 1

details_name这个class我是没有设定样式表的，设置了父容器的高度40px，但是现在实际情况是父容器还是40，details_name这个标题栏的div莫名其妙变成了43.2px而且是灰色的

找到答案了https://segmentfault.com/a/11...

Answer 2

可以不在父元素下写line-height:40px;和height：40px；
用子元素去撑开父元素

 #musicDetails .detail_tile .details_name{
           
            line-height: 40px;
            height: 40px;
           
        }

Answer 3

默认有3px，有设置margin:0;padding:0;吗

Answer 4

往下拉可以看到这个盒子的各种边距以及设定的宽高
切换成Computed可以看该盒子最终的样式(css样式之间存在覆盖现象，Computed选项卡看到的样式才是实际显示所使用的样式)

Answer 5

是不是设置border了

Answer 6

让它吃饱就行了