javascript - 在 div 中添加填充，背景图像和颜色消失

Question

首先让我说一下这个网站对我的小元素有多大帮助。不管怎样，关于我的问题。

所以现在我正在为自己创建一个个人网站，我想为某些内容添加一些填充，但是当我添加填充时，它最终会在某些内容之间创建空间并使其完全变白而不使用背景图像或颜色。这就是我的意思。

When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?

And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing

我只在“关于”选项卡中添加了填充，如您所见，与其他选项卡相比，它一团糟(This is the jsfiddle)

.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}

这是保存信息的类的 css 代码。

Answer 1

去掉 .two 的填充，如果你想要在 .four 中的内容周围有白色边框，你可以使用边距:

$(document).ready(function(event) {

  $('.one').click(function() {
    $('.two').slideToggle();
  })


  $('.three').click(function() {
    $('.four').slideToggle();
  })

  $('.five').click(function() {
    $('.six').slideToggle();
  })


  $('.seven').click(function() {
    $('.eight').slideToggle();
  })

  setTimeout(function() {
    $('.two').slideToggle();
  }, 500);

});

body {
  margin: 0;
}
.container {
  overflow: hidden;
}
.one {
  position: relative;
  top: 0;
  background-color: #605F5F;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.two {
  background-color: #333333;
  display: none;
  text-align: center;
  color: white;
  background-image: url("noise.png");
}
.three {
  position: relative;
  top: 0;
  background-color: #605F5F;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.four {
  background-color: #333333;
  display: none;
  text-align: center;
  background-image: url("noise.png");
  color: white;
  margin: 15px;
}
.five {
  position: relative;
  top: 0;
  background-color: #605F5F;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.six {
  background-color: #333333;
  display: none;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.seven {
  position: relative;
  top: 0;
  background-color: #605F5F;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.eight {
  background-color: #333333;
  display: none;
  text-align: center;
  background-image: url("noise.png");
  color: white;
}
.botbar {
  background-color: #2b2a2a;
  text-align: center;
  color: white;
  background-image: url("noise.png");
}
.big1 {
  font-family: 'Megrim', serif;
  font-size: 210px;
}
.small1 {
  font-family: 'Ubuntu', serif;
  font-size: 80px;
}
.small2 {
  font-family: 'Ubuntu', serif;
  font-size: 30px;
  background-clip: initial;
  margin: auto;
}
.botinfo {
  font-family: 'Ubuntu', serif;
  font-size: 25px;
}

<div class="container">
  <div class="big1">
    <div class="one">Main</div>
  </div>
  <div class="small1">
    <div class="two">Welcome to my page!
      <br>Click around
      <br>Learn a thing or two about me</div>
  </div>
  <div class="big1">
    <div class="three">About</div>
  </div>
  <div class="small2">
    <div class="four">My name is Bob and I currently attend University of Bob.
      <br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
      <br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
      <br>All my projects can be found in the tab below!</div>
  </div>
  <div class="big1">
    <div class="five">Projects</div>
  </div>
  <div class="small1">
    <div class="six">My projects can be found here</div>
  </div>
  <div class="big1">
    <div class="seven">Contact</div>
  </div>
  <div class="small1">
    <div class="eight">You can contact me here</div>
  </div>
  <div class="botinfo">
    <div class="botbar">Made by Bob | Copyright 2016</div>
  </div>
</div>