CSS设置问题：为什么字不在div里

Question

外层三个div,内层一个h2，都设置样式后h2里的字不在设置的范围内

<div class="inner-wrapper">
     <div class="view-id-news">
           <div class="view-header">
                 <h2 class="block_title">NEWS</h2>
           </div>
     </div>
 </div>   
 

样式：

 .inner-wrapper{
 width: 1349px;
 height: auto;
 margin-top:20px;
 }
.inner-wrapper .view-id-news{
width: 899px;
height: auto;
}

.inner-wrapper .view-id-news .view-header{
width: 851px;
height: 77px;
padding: 24px;
border-bottom: solid #222222 1px;
}
.inner-wrapper .view-id-news .view-header h2{
display: block;
color: #CCCCCC;
font-size: 50px;
letter-spacing: 5px;
width: 850px;
height: 76px;

}
截图看位置：

Answer 1

.view-header 类设置高度 77px，内边距 24px；h2 设置高度 76px
渲染的结果就是: 距离高 77px 的块状 div 顶部下 24px 处位置有一高 76px 的块状 h2
而实际上，h2 在内容上并没有与自身 76px 相垂直居中，毕竟 h2 的默认 line-height 不一定为 76px
直接结果就是导致 h2 溢出 .view-header 外

除此之外 box-sizing 的设置也会影响盒子高度的计算，这得视具体情况而定

Answer 2

.inner-wrapper .view-id-news .view-header这里设置了固定高度77px，但是inner-wrapper .view-id-news .view-header h2的高度是需要比现在77px还高，所以不在是正常的