html - 删除

Question

如何消除 h1 和 p 元素之间的间隙？我试过删除填充和边距，但没有成功。我正在使用默认的 Bootstrap css。有什么想法吗？

.section1{
	background-color: bisque;
}

p, h1 {
  margin: 0px;
  padding: 0px;
}

<div class="section1">
    <div class="container">
    	<div class="row">
    		<div class="col-sm-12">
    			<h1 class="page-header">About</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
    		</div>
    	</div>
    </div>
</div>

我已将屏幕截图附加到这篇文章，因为当我使用 stackoverflows 的“运行代码段”功能运行代码时它显示正确。

Answer 1

page-header Bootstrap 类导致 space 使用以下方式重置它:

h1.page-header {
  margin: 0;
  padding: 0;
}

请看下面的演示:

.section1 {
  background-color: bisque;
}
p,
h1 {
  margin: 0px;
  padding: 0px;
}
h1.page-header {
  margin: 0;
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="section1">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="page-header">About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
      </div>
    </div>
  </div>
</div>