消除<h1>和<p>之间的差距？

Question

如何消除h1和p元素之间的差距？我试过没有运气就去掉了填充物和边距。我使用默认的bootstrap css。有什么想法吗？

＆＃13;

＆＃13;

.section1{
	background-color: bisque;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我在这篇文章中附上截图，因为当我使用stackoverflows＆＃39;运行代码段＆＃39;运行代码时，它正确显示特征。

Answer 1

page-header引导类导致空间使用以下命令重置它：

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

见下面的演示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将line-height添加到CSS中的h1类。如果字体大小为26px，则仅为26px行高。

像：

h1.page-header{
font-size:26px;
line-height:26px;
}

Answer 3

尝试使用line-height

.section1 {
  background-color: bisque;
  line-height: 15px;
}
p,
h1 {
  margin: 0px;
  padding: 0px;
}
.page-header{
  margin:0 !important;
  padding:0 !important;

<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>

Answer 4

您需要先重置css。因为浏览器具有格式CSS本身

• { 保证金：0px; 填充：0px;}

在css文件上方添加此内容