如何摆脱“边际”
[英]How to get rid of “margin”
问题描述
I would like to know how to get rid of the white space at the very bottom of my webpage, it is really annoying me and it isn't meant to be there. 
我想知道如何摆脱我网页底部的空白区域，它真的很烦我，它并不意味着在那里。
Code below: 代码如下：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="freeloves.css">
HTML Code : HTML代码：
<body>
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/logo.png" class="logo" alt="The Free Loves" width="544" height="100" /></li>
<li><a href="test.html">Home</a></li>
<li><a href="test/index.html%3Fp=2103.html">Album <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="test/index.html%3Fp=2441.html">Album Featured</a></li>
<li class="submenu-item2"><a href="test/index.html%3Fp=2103.html">No Space<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2377.html">Album 1 Column, No Space</a></li>
<li><a href="test/index.html%3Fp=2356.html">Album 2 Columns, No Space</a></li>
<li><a href="test/index.html%3Fp=2103.html">Album 3 Columns, No Space</a></li>
<li><a href="test/index.html%3Fp=2357.html">Album 4 Columns, No Space</a></li>
</ul>
</li>
<li class="submenu-item62"><a href="test/index.html%3Fp=2360.html">With Space <img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2378.html">Album 1 Column With Space</a></li>
<li><a href="test/index.html%3Fp=2361.html">Album 2 Columns With Space</a></li>
<li><a href="test/index.html%3Fp=2360.html">Album 3 Columns With Space</a></li>
<li><a href="test/index.html%3Fp=2362.html">Album 4 Columns With Space</a></li>
</ul>
</li>
<li id="menu-item-3251" class="menu-item menu-item-type-taxonomy menu-item-object-album menu-item-3251"><a href="test/album/hundred-miles/index.html">Inside Album</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=2211.html">Event <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="test/index.html%3Fp=2079.html">Event List</a></li>
<li><a href="test/index.html%3Fp=2211.html">Event List With Month</a></li>
<li><a href="test/index.html%3Fp=2434.html">Event Widget Style</a></li>
<li><a href="test/index.html%3Fp=2101.html">Single Event</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=2446.html">Members</a></li>
<li><a href="#">Pages <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="http://themes.goodlayers2.com/musicclub/404error">404 Page</a></li>
<li class="submenu-item50"><a href="test/index.html%3Fp=1424.html">Features <img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1424.html">New Page Builder</a></li>
<li><a href="test/index.html%3Fp=1482.html">Parallax/Color Wrapper</a></li>
<li><a href="test/index.html%3Fp=1476.html">Custom Skin</a></li>
<li><a href="test/index.html%3Fp=1493.html">Sidebar Size Customizable</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1566">Scalable Container</a></li>
<li><a href="test/index.html%3Fp=1572.html">Floating Navigation</a></li>
<li><a href="test/index.html%3Fp=1569.html">Boxed/Full Style</a></li>
<li><a href="test/index.html%3Fp=1575.html">Woocommerce Friendly</a></li>
<li><a href="test/index.html%3Fp=1496.html">Mega Menu</a></li>
<li><a href="test/index.html%3Fp=1513.html">Unlimited Sidebar</a></li>
<li><a href="test/index.html%3Fp=1510.html">Font Uploader</a></li>
</ul>
</li>
<li class="submenu-item51"><a href="test/index.html%3Fp=1321.html">Shop<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1231.html">Shop With Sidebar</a></li>
<li><a href="test/index.html%3Fp=1321.html">Shop Full Width</a></li>
<li><a href="test/index.html%3Fp=1232.html">Cart</a></li>
<li><a href="test/index.html%3Fp=1233.html">Checkout</a></li>
<li><a href="test/index.html%3Fp=1234.html">My Account</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=1629.html">Contact Page 1</a></li>
<li><a href="test/index.html%3Fp=1631.html">Contact Page 2</a></li>
<li class="submenu-item52"><a href="test.html#">Video Tutorial<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1746.html">Installing theme and Setting as demo site</a></li>
<li><a href="test/index.html%3Fp=1762.html">Page Builder</a></li>
<li><a href="test/index.html%3Fp=1748.html">Creating Portfolio & Filterer</a></li>
<li><a href="test/index.html%3Fp=1750.html">Creating Blog</a></li>
<li><a href="test/index.html%3Fp=1754.html">Thumbnail Management</a></li>
<li><a href="test/index.html%3Fp=1752.html">Creating Gallery</a></li>
</ul>
</li>
<li class="submenu-item53"><a href="test.html#">Gallery<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul class="dl-submenu">
<li><a href="test/index.html%3Fp=1598.html">Gallery 2 Columns</a></li>
<li><a href="test/index.html%3Fp=1602.html">Gallery 3 Columns</a></li>
<li><a href="test/index.html%3Fp=1605.html">Gallery 4 Columns</a></li>
<li><a href="test/index.html%3Fp=1620.html">Gallery 5 Columns</a></li>
<li><a href="test/index.html%3Fp=2419.html">Gallery 2 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2420.html">Gallery 3 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2421.html">Gallery 4 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2422.html">Gallery 5 Columns With Caption</a></li>
</ul>
</li>
<li class="menu-item"><a href="test/index.html%3Fp=84.html">Testimonial</a></li>
</ul>
</li>
<li class="menu-item"><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio<img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li class="submenu-item54"><a href="test.html#">Portfolio With Text<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/portfolio-1-column-with-text-and-space/page/1/index.html">Portfolio 1 Column With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=906">Portfolio 2 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=100">Portfolio 3 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=908">Portfolio 4 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2147">Portfolio 2 Columns With Text, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2146">Portfolio 3 Columns With Text, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2148">Portfolio 4 Columns With Text, No Space</a></li>
</ul>
</li>
<li class="submenu-item70"><a href="test.html#">Portfolio Modern<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/portfolio-1-column-modern-with-space/page/1/index.html">Portfolio 1 Column Modern Style With Space</a></li>
<li><a href="test/portfolio-2-columns-modern-with-space/page/1/index.html">Portfolio 2 Columns Modern Style With Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2161">Portfolio 3 Columns Modern Style With Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2162">Portfolio 4 Columns Modern Style With Space</a></li>
<li><a href="test/portfolio-2-columns-modern-style-no-space/page/1/index.html">Portfolio 2 Columns Modern Style, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio 3 Columns Modern Style, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2170">Portfolio 4 Columns Modern Style, No Space</a></li>
</ul>
</li>
<li class="submenu-item71"><a href="test.html#">Portfolio With Filter<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="http://www.thefreeloves.com/test/?page_id=954">Portfolio Grid 1 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=952">Portfolio Grid 2 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=949">Portfolio Grid 3 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=947">Portfolio Grid 4 Columns With Filter</a></li>
</ul>
</li>
</ul>
<li class="menu-item"><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog<img src="arrow.png" alt="arrow" class="arrow3"></a>
<ul>
<li class="submenu-item72"><a href="test.html#">Blog Full<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog Full With Right Sidebar</a></li>
<li><a href="test/blog-full-with-left-sidebar/page/1/index.html">Blog Full With Left Sidebar</a></li>
<li><a href="test/blog-full-with-both-sidebar/page/1/index.html">Blog Full With Both Sidebar</a></li>
<li><a href="test/blog-full-without-sidebar/page/1/index.html">Blog Full Without Sidebar</a></li>
</ul>
</li>
<li class="submenu-item73" data-column="three columns" data-size="1/4"><a href="test.html#">Blog Column<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/blog-1-column/page/1/index.html">Blog 1 Column (Right Sidebar)</a></li>
<li><a href="test/blog-2-columns/page/1/index.html">Blog 2 Columns (Right Sidebar)</a></li>
<li><a href="test/index.html%3Fp=878.html">Blog 3 Columns</a></li>
<li><a href="test/blog-4-columns/page/1/index.html">Blog 4 Columns</a></li>
</ul>
</li>
<li class="submenu-item74"><a href="test.html#">Blog Masonry<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=887.html">Blog 2 Columns – Masonry (Right Sidebar)</a></li>
<li><a href="test/index.html%3Fp=888.html">Blog 3 Columns – Masonry</a></li>
<li><a href="test/index.html%3Fp=889.html">Blog 4 Columns – Masonry</a></li>
</ul>
</li>
<li class="submenu-item55"><a href="test/index.html%3Fp=2063.html">Blog Medium<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2065.html">Blog Medium With Left Sidebar</a></li>
<li><a href="test/index.html%3Fp=2063.html">Blog Medium With Right Sidebar</a></li>
<li><a href="test/index.html%3Fp=2067.html">Blog Medium With Both Sidebar</a></li>
<li><a href="test/blog-medium-without-sidebar/page/1/index.html">Blog Medium Without Sidebar</a></li>
</ul>
</li>
</ul>
<li><a href="test/index.html%3Fp=120.html">Shortcodes <img src="arrow.png" alt="arrow" class="arrow4"></a>
<ul>
<li class="submenu-item61 menu-code"><a href="test.html#">Set 1<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=149.html">Accordion/Toggle Box</a></li>
<li><a href="test/index.html%3Fp=784.html">Audio Shortcode</a></li>
<li><a href="test/index.html%3Fp=156.html">Button</a></li>
<li><a href="test/index.html%3Fp=1017.html">Column Shortcode</a></li>
<li><a href="test/index.html%3Fp=203.html">Divider</a></li>
<li><a href="test/index.html%3Fp=2541.html">Event Widget</a></li>
<li><a href="test/index.html%3Fp=705.html">Gallery Shortcode</a></li>
</ul>
</li>
<li class="submenu-item60 menu-code"><a href="test.html#">Set 2<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=296.html">Heading Tag</a></li>
<li><a href="test/index.html%3Fp=653.html">icons & icon boxes</a></li>
<li><a href="test/index.html%3Fp=211.html">Lightbox & Frames</a></li>
<li><a href="test/index.html%3Fp=236.html">Notification Boxes</a></li>
<li><a href="test/index.html%3Fp=456.html">Members</a></li>
<li><a href="test/index.html%3Fp=2525.html">Music Player</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1039">Post Slider</a></li>
</ul>
</li>
<li class="submenu-item80"><a href="test.html#">Set 3<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul class="sub-menu">
<li><a href="http://www.thefreeloves.com/test/?page_id=1400">Price Table</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1084">Process</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=258">Progress Circle</a></li>
<li><a href="test/index.html%3Fp=245.html">Skills</a></li>
<li><a href="test/index.html%3Fp=1045.html">Slider Shortcode</a></li>
<li><a href="test/index.html%3Fp=640.html">Space</a></li>
</ul>
</li>
<li class="submenu-item81"><a href="test.html#">Set 4<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=116.html">Styled Box</a></li>
<li><a href="test/index.html%3Fp=285.html">Stunning Text</a></li>
<li><a href="test/index.html%3Fp=687.html">Table</a></li>
<li><a href="test/index.html%3Fp=218.html">Tabs</a></li>
<li><a href="test/index.html%3Fp=428.html">Testimonial & Quote</a></li>
<li><a href="test/index.html%3Fp=120.html">Typography</a></li>
<li><a href="test/index.html%3Fp=797.html">Video</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="slider">
<div id="toggle-left" class="toggles"><i><img src="arrow-right.png" alt="left arrow" class="toggle-arrow" id="left-arrow"></i></div>
<div id="toggle-right" class="toggles"><i><img src="arrow-right.png" alt="right arrow" class="toggle-arrow"></i></div>
<ul class="slides">
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<div class="music">
<!--<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/61481425&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&visual=true"></iframe>-->
</div>
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
Javascript : Javascript：
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").children("ul").hide(); //hides the lists when documents loads
$(".nav ul li").hover(
function(){//onmouseover
$(this).children("ul").delay(450).slideDown(200);
},
function(){//onmouseout
$(this).children("ul").slideUp(200);
});
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.li');
var $slideImg = $slides.find('img');
var $toggleLeft = $('#toggle-left');
var $toggleRight = $('#toggle-right');
var $pauseBtn = $('#pause-btn');
var $playBtn = $('#play-btn');
//configuration
var width = $slider.width();
var animationSpeed = 1500;
var pause = 9000;
var currentSlide = 1;
var interval;
$slideContainer.css('width', width * $slides.length);
$slideImg.css('width', width);
$pauseBtn.click(function(){stopSlider();$pauseBtn.toggle();$playBtn.toggle();});
$playBtn.click(function(){startSlider();$playBtn.toggle();$pauseBtn.toggle();});
$toggleLeft.click(function(){
stopSlider();
if (currentSlide === 1) {
currentSlide = $slides.length;
$slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
currentSlide--;
});
} else {
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
currentSlide--;
});
}
startSlider();
});
$toggleRight.click(function(){
stopSlider();
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
startSlider();
});
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
startSlider();
});
</script>
<script>
$(document).ready(function(){
});
</script>
CSS : CSS：
body {
margin: 0;
padding: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 16px;
}
body, html {
margin: 0;
height: 100%;
width: 100%;
}
.nav-wrapper {
width: 100%;
margin: 0;
text-align: left;
}
.nav {
background-color: rgba(34,34,34,0.5);
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 2;
width: 100%;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
margin-right: 0px;
}
.nav ul li a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li ul li:hover img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li ul li img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul ul {
display: none;
position: absolute;
background-color: #222;
border: 5px solid #222;
min-width: 100px;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a,visited {
color: #ccc;
}
.nav ul ul li a:hover {
color: white;
transition: color 0.2s ease-in;
}
.nav ul li ul li.submenu-item52 ul {
min-width: 350px;
}
.nav ul ul li.submenu-item2 ul {
left: 147px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item50 ul {
left: 150px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item62 ul {
left: 147px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item51 ul {
left: 150px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item52 ul {
left: 150px;
top: 252px;
}
.nav ul ul li.submenu-item53 ul {
left: 150px;
top: 303px;
min-width: 250px;
}
.nav ul ul li.submenu-item54 ul {
left: 190px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item55 ul {
left: 150px;
top: 151px;
min-width: 345px;
}
.nav ul ul li.submenu-item60 ul {
left: 152px;
top: 50px;
}
.nav ul ul li.submenu-item61 ul {
left: 150px;
top: -1px;
}
.nav ul ul li.submenu-item70 ul {
left: 189px;
top: 50px;
min-width: 350px;
}
.nav ul ul li.submenu-item71 ul {
left: 189px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item72 ul {
left: 140px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item73 ul {
left: 150px;
top: 50px;
min-width: 345px;
}
.nav ul ul li.submenu-item74 ul {
left: 150px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item80 ul {
left: 153px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item81 ul {
left: 153px;
top: 151px;
min-width: 350px;
}
.menu-code {
max-width: 200px;
min-width: 150px;
}
.menu-code ul li {
max-width: 300px;
min-width: 250px;
}
.logo {
width: 75%;
height: 75%;
vertical-align: middle;
margin-left: 100px;
}
.nav ul li ul {
border-top: 1px solid #D4941F;
}
ul li ul li {
border-bottom: 1px solid #111;
}
ul li ul {
border-right: 5px solid #111;
}
.slider {
overflow: hidden;
position: relative;
margin-bottom: 0;
}
.slides, .slide {
list-style: none;
margin: 0;
padding: 0;
}
.slides img {
margin: auto;
width: 100%;
height: 971px;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.slide {
float: left;
}
.slider .toggles {
color: #000;
height: 48px;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
transition: all .3s linear;
width: 48px;
z-index: 3;
}
.slider .toggles:hover {
cursor: pointer;
}
.slider:hover .toggles {
opacity: 1;
}
.slider .toggles i:before {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.slider #toggle-right i:before, #slider #toggle-left i:before {
height: 20px;
width: 18px;
}
#toggle-right {
right: 0;
margin-right: 100px;
margin-bottom: auto;
}
#toggle-left {
left: 0;
margin-bottom: auto;
margin-left: 75px;
}
#left-arrow {
transform: rotate(180deg);
}
.toggle-arrow {
width: 100px;
height: 180px;
opacity: 0.6;
}
.music {
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
opacity: 0.5;
width: 50%;
margin-right: 100px;
margin-top: 800px;
transition: opacity 0.5s;
}
.music:hover {
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
opacity: 0.9;
width: 50%;
margin-right: 100px;
margin-top: 800px;
transition: opacity 0.5s ease-in;
}
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 10%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.slash {
color: white;
font-size: 50px;
}
2 个解决方案
解决方案1
2 已采纳 2015-09-23 04:44:19
The white space is because of that code: 白色空间是因为该代码：
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
If you remove that, the whitespace is gone. 如果你删除它，空格就消失了。
But if you like it, you can solve by adding margin-bottom: 0 and margin-top: 0 to the h3.text1 : 但是如果你喜欢它，你可以通过在h3.text1添加margin-bottom: 0和margin-top: 0来h3.text1 ：
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-top: 0;
margin-bottom: 0;
}
So beautiful ! 太美了 ！
解决方案2
1 2015-09-23 04:50:25
Most likely, this stems from the default margin/padding of body. 最有可能的是，这源于身体的默认边距/填充。 Try adding 尝试添加
html,body {padding:0; margin:0;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何摆脱页面上不必要的ng-container边距？ - How to get rid of unnecessary ng-container margin on the page?
如何消除页面上的空白边距并使之宽100％ - How to get rid of white margin from the page and make it 100% wide
无法摆脱div的空白边距 - Can't get rid of white margin on div's
摆脱C3图表上的顶部/底部边距/填充 - Get rid of top/bottom margin/padding on C3 Chart
如何摆脱几何？ - How to get rid of geometry?
如何摆脱这个 ffmpeg？ - How to get rid of this ffmpeg?
如何摆脱这个楠？ - How to get Rid of this Nan?
如何摆脱这个循环 - How to get rid of this loop
如何摆脱未定义？ - How to get rid of undefined?
如何摆脱jscroll分隔符？ - how to get rid of the jscroll separator?
相关标签