css去除默认行高，完成精准布局

问题出现：

			.box {
				width: 500px;
				height: 400px;
				border: 1px solid #ccc;
				/* background: pink; */
				margin: 100px auto;
				padding: 42px 30px 0;
			}
			.box h2 {
				height: 39px;
				border-bottom: 1px solid #ccc;
				background: pink;
			}

  由上述代码，在设置了盒子的高度且未设置行高的情况下，浏览器会有默认的行高，导致标题这里会看到文字并不是顶住整个盒子的左上方。

  解决问题的方式：

  通过给body设置line-height:1，解决默认行高，实现精准布局。

			body {
				/* 去除默认行高，实现精准布局 */
				line-height: 1;
			}

 

效果如下：