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

可以不在父元素下写line-height:40px;和height：40px；

用子元素去撑开父元素

 #musicDetails .detail_tile .details_name{

           

            line-height: 40px;

            height: 40px;

           

        }

Answer 2

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

Answer 3

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

Answer 4

是不是设置border了