在h1航向以上的Bootstrap大幅度

Question

.row {background-color: pink;}
h1 {background-color: cyan;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<h1>China</h1>
	</div>
</div><!--end container-->

h1标记的顶部有一个很大的余量。当我在浏览器中使用检查工具来禁用h1的边距时，它只会变大。这是为什么？

Answer 1

  

当我在浏览器中使用检查工具来禁用h1的边距时，它只会变大。这是为什么？

在屏幕截图中，您是否在底部的第三个框中看到h1和bootstrap.css:62的位置？

当您在位于h1的{​​{1}}上停用边距时，会应用另一个边距。 bootstrap.css:1224根据margin: .67em 0应用上下边距，这相当大，因此可以解释为什么当您停用其他边距时边距会变大。

Answer 2

使用此代码：

您需要设置h1 {margin: 10px 10px!important;}的保证金以解决问题。

＆＃13;

＆＃13;

.row {background-color: pink;}
h1 {background-color: cyan; margin: 10px 10px!important;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<h1>China</h1>
	</div>
</div><!--end container-->

＆＃13;

＆＃13;

＆＃13;