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

Question

First off let me say how much of a big help this website has been with my little project. Anyway on to my question.

So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.

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

I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)

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

This is the css code for the class holding the info.

Answer 1

Take the padding off .two , and if you want the white border around the content in .four , you can use a margin:

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

Answer 2

尝试将填充移至.four类，我认为它将为您提供所需的结果。

Answer 3

You could do some restructuring of the code to simplify it like

 $(document).ready(function(event) { $('.header').click(function() { $(this).next('.content').slideToggle(); }) setTimeout(function() { $('.content').first().slideToggle(); }, 500); }); 

 body { margin: 0; } .container { overflow: hidden; } .header { position: relative; top: 0; background-color: #605F5F; z-index: 1; cursor: pointer; text-align: center; background-image: url("noise.png"); color: white; } .content { background-color: #333333; display: none; text-align: center; color: white; background-image: url("noise.png"); } .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; padding: 15px; margin: auto; } .botinfo { font-family: 'Ubuntu', serif; font-size: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="big1 header"> Main </div> <div class="small1 content"> Welcome to my page! <br>Click around <br>Learn a thing or two about me </div> <div class="big1 header"> About </div> <div class="small2 content"> 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 class="big1 header"> Projects </div> <div class="small1 content"> My projects can be found here </div> <div class="big1 header"> Contact </div> <div class="small1 content"> You can contact me here </div> <div class="botinfo"> <div class="botbar">Made by Bob | Copyright 2016</div> </div> </div> 

Answer 4

Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)

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