Firefox上的奇怪缩进空间

时间：2018-07-22 03:27:21

标签： html5 css3

由于某些原因，一个CSS项目已经创建了一个缩进，但我不知道为什么。似乎是在创建边距，但是列中的所有项目都具有相同的顶部边距，因此我不明白为什么只有其中一个与其他项目不同。

详细信息详细信息详细信息我不知道为什么我需要更多详细信息，而这令人讨厌，我已经解释了我的困境。

HTML 

<nav class="navbar">
  <ul>
    <li class="navbar-item"> <a href="index.html">Home</a> </li>
    <li class="navbar-item"> <a href="recent.html">Browse</a> </li>
    <li class="align-right"><input type="email" name="" placeholder="example@email.com"></li>
    <li class="align-right"> <input type="password" name="" placeholder="Password"> </li>
    <li class="align-right"> <button type="submit" name="button">Sign In!</button> </li>
  </ul>
</nav>



<div class="jumboboi allinsidejumboboi">
  <div class="">
    <h1>Hey there, wanna sign up?!</h1>
    <form class="" action="index.html" method="post">
      <label for="emailInput">Email:</label>
      <input type="email" name="emailInput" placeholder="example@email.com" required>
      <p><button type="submit" name="signUp">Sign Up!</button></p>
    </form>
  </div>
</div>




<div class="content-columns">
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
  </p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
  </p>
</div>



<div class="jumboboi-reverse">
  <div class="">

  </div>
</div>

CSS 

.jumboboi{
  background: linear-gradient(#4040cf,#f2f0e9);
  margin-left: -10px;
  margin-right:-10px;
  height:200px;
  margin-top:-17px;
}
li a{
  padding-top:7px;
  display:block;
  width:80px;
  color:#d1cec5;
  text-align: center;
}
nav{
  height:50px;
  margin-top:-18px;
  margin-right:-15px;
  margin-left:-15px;
  background-color: #333333;
}
.jumboboi-reverse{
  background: linear-gradient(#f2f0e9,#4040cf);
  margin-top:40px;
  margin-left: -10px;
  margin-right:-10px;
  height:200px;
  margin-bottom:-10px;
}

.allinsidejumboboi{
  text-align: center;
  padding-top:5%;
  padding-bottom:5%;
}

body{
  background:#f2f0e9;
  color:#333333;
}
.content-columns{
  column-count:auto;
  column-width:300px;
  column-gap: 10px;
}
.navbar-item{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100px;
}
li{
  float:left;
}
.fifth-width{
  max-width:100%
}
.flex-height{
  display: -webkit-flex;
  -webkit-flex-direction:column;
  display:flex;
  flex-direction:column;
}

1 个答案:

答案 0 :(得分：0)

您可以从display: flex; flex-direction: column;中删除.flex-height，因为这没有做任何事情，并添加margin: 0 0 1em 0;可以删除段落的顶部空白，同时保留一定的底部空白，现在也可以保留顶部列将对齐。更新代码段：

.jumboboi{
  background: linear-gradient(#4040cf,#f2f0e9);
  margin-left: -10px;
  margin-right:-10px;
  height:200px;
  margin-top:-17px;
}
li a{
  padding-top:7px;
  display:block;
  width:80px;
  color:#d1cec5;
  text-align: center;
}
nav{
  height:50px;
  margin-top:-18px;
  margin-right:-15px;
  margin-left:-15px;
  background-color: #333333;
}
.jumboboi-reverse{
  background: linear-gradient(#f2f0e9,#4040cf);
  margin-top:40px;
  margin-left: -10px;
  margin-right:-10px;
  height:200px;
  margin-bottom:-10px;
}

.allinsidejumboboi{
  text-align: center;
  padding-top:5%;
  padding-bottom:5%;
}

body{
  background:#f2f0e9;
  color:#333333;
}
.content-columns{
  column-count:auto;
  column-width:300px;
  column-gap: 10px;
}
.navbar-item{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100px;
}
li{
  float:left;
}
.fifth-width{
  max-width:100%
}

.flex-height {
  margin: 0 0 1em 0;
}
<nav class="navbar">
  <ul>
    <li class="navbar-item"><a href="index.html">Home</a></li>
    <li class="navbar-item"><a href="recent.html">Browse</a></li>
    <li class="align-right"><input type="email" name="" placeholder="example@email.com"></li>
    <li class="align-right"><input type="password" name="" placeholder="Password"></li>
    <li class="align-right"><button type="submit" name="button">Sign In!</button></li>
  </ul>
</nav>

<div class="jumboboi allinsidejumboboi">
  <div class="">
    <h1>Hey there, wanna sign up?!</h1>
    <form class="" action="index.html" method="post">
      <label for="emailInput">Email:</label>
      <input type="email" name="emailInput" placeholder="example@email.com" required>
      <p><button type="submit" name="signUp">Sign Up!</button></p>
    </form>
  </div>
</div>


<div class="content-columns">
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
  </p>
  <p class="flex-height"><img class="fifth-width" src="static/Bootstrap.png" alt="">
  </p>
</div>


<div class="jumboboi-reverse">
  <div class="">

  </div>
</div>

相关问题
最新问题