在CSS中向<h1>移动文本

Question

我正在尝试将此段落标题移向我的h1。我真的不明白如何结合位置功能。我试过使用填充但它不起作用。

好的，所以在图片中我试图在“Boblo”下面找到“每个连接都很重要的地方”

底部是我的HTML代码

.jumbotron h1 {
  text-align: left;
  color: white;
  font-size: 60px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
  padding-top:20px;
  padding-bottom:5px
}

.jumbotron p {
  font-size: 30px;
  color: white;
  font-weight: bold;
  text-align: left;
}

<div class="jumbotron">
  <div class="container">
  <h1>BOBLO</h1>
  <p>Where every connection matters</p>

Answer 1

如果您使用Bootstrap（我猜），则必须将$("#aspnetForm").data('formValidation',null); $("#aspnetForm").formValidation({.... 和<h1>设为margin-bottom标记为零。

padding-bottom

.jumbotron .container h1 {
   text-align: left;
   color: white;
   font-size: 60px;  
   font-family: 'Shift', sans-serif;
   font-weight: bold;
   padding-top:20px;
   padding-bottom:5px;
   margin-bottom: 0;
   padding-bottom: 0;
  
}
.jumbotron .container p {
   font-size: 30px;
   color: white;
   font-weight: bold;
   text-align: left;
}

如果<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container"> <h1>BOBLO</h1> <p>Where every connection matters</p> </div> </div>和<h1>之间的差距再次变大，您可以使用<p>修复此问题。

我希望这会对你有所帮助。

Answer 2

删除h1中的边距和填充可能是最干净的解决方案。但是有时候这行不通，然后我总是应用position:relative; top:-20px;。这会将元素从通常的位置上移20px：

.jumbotron .container h1 {
   text-align: left;
   color: white;
   font-size: 60px;  
   font-family: 'Shift', sans-serif;
   font-weight: bold;
   padding-top:20px;
   padding-bottom:5px;
       
}
.jumbotron .container p {
   font-size: 30px;
   color: white;
   font-weight: bold;
   text-align: left;
   position:relative; 
   top:-20px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container">
      <h1>BOBLO</h1>
      <p>Where every connection matters</p>
    </div>
</div>

Answer 3

您可以将一个类添加到h1并删除margin-bottom，请参阅并尝试以下代码。您可以采取我的实施并适应您的需求。

HTML：

<h1 class="test">TEST HEADING</h1>
<header>HEADER</header>

CSS：

.test{
    margin-bottom: 0 !important;
}

希望这有帮助！