HTML 页面底部的空格

Question

I have one very difficult problem for me when finishing my HTML project. The problem is there's a blank space at the bottom of my HTML page. I've tried every way to remove it but then when I try it, the other element will be messy. How to remove the blank space while keeping the other element?

Here's my code:

 /* CSS Reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: black; } img { max-width: 100%; height: auto; } ul, ol { list-style: none; } h1, h2, h3 { font-family: roboto light; } p { font-family: open sans; }::-webkit-scrollbar { width: 17px; height: 10px; }::-webkit-scrollbar-track { background-color: rgba(0,0,0.1); border-radius: 2px; }::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #3498db; transition: all.4 linear; }::-webkit-scrollbar-thumb:hover { background-color: #2980b9; }.container4 { width: 100%; height: 600px; padding-bottom: -1000px; }.header4 { text-align: center; padding-top: 80px; color: #424242; } /* Flipper */ /* entire container, keeps perspective */.flip-container { position: relative; top: 20px; left: 50px; perspective: 1000px; } /* flip the pane when hovered */.flip-container:hover.flipper, .flip-container.hover.flipper { transform: rotateY(180deg); }.flip-container, .front, .back { width: 200px; height: 200px; } /* flip speed goes here */.flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */.front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */.back { transform: rotateY(180deg); } /* End Flipper */.tim1 { width: 300px; height: 480px; background-color: #EEEEEE; margin-left: 25px; border: 4px solid #FAFAFA; text-align: center; transition: all.4s ease-in-out; }.tim1:hover { border: 4px solid #ecf0f1; background-color: #E0E0E0; }.tim2 { width: 300px; height: 480px; background-color: #EEEEEE; position: relative; top: -489px; left: 355px; border: 4px solid #FAFAFA; text-align: center; transition: all.4s ease-in-out; }.tim2:hover { border: 4px solid #ecf0f1; background-color: #E0E0E0; }.tim3 { width: 300px; height: 480px; background-color: #EEEEEE; position: relative; top: -978px; left: 685px; border: 4px solid #FAFAFA; text-align: center; transition: all.4s ease-in-out; }.tim3:hover { border: 4px solid #ecf0f1; background-color: #E0E0E0; }.tim4 { width: 300px; height: 480px; background-color: #EEEEEE; position: relative; top: -1468px; left: 1015px; border: 4px solid #FAFAFA; text-align: center; transition: all.4s ease-in-out; }.tim4:hover { border: 4px solid #ecf0f1; background-color: #E0E0E0; } @-webkit-keyframes efekgambar { 0% { -webkit-filter: contrast(400%) grayscale(0%); } 100% { -webkit-filter: contrast(100%) grayscale(100%); } } @-webkit-keyframes terang { 0% { -webkit-filter: brightness(100%); } 100% { -webkit-filter: brightness(125%); } }.orang1, .orang2, .orang3, .orang4 { animation-name: terang; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; position: relative; width: 200px; height: 200px; border-radius: 50%; border: 4px solid #ecf0f1; }.orang1back, .orang2back, .orang3back, .orang4back { position: relative; width: 200px; height: 200px; border-radius: 50%; border: 4px solid #ecf0f1; animation-name: efekgambar; animation-direction: alternate; animation-duration: 2s; animation-iteration-count: infinite; }.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover, .orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover { border: 4px solid #EEEEEE; }.sosial-media ul { display: flex; float: left; position: relative; top: 30px; left: 70px; }.sosial-media ul li { list-style: none; }.sosial-media ul li a { width: 30px; height: 30px; text-align: center; line-height: 30px; margin: 0 2px; display: block; border-radius: 50%; position: relative; overflow: hidden; border: 4px solid #FAFAFA; z-index: 1; }.fb { background: #507cd3; }.tw { background: #7fc9ff; }.gp { background: #ff6251; }.ig { background: #ff5b79; }.sosial-media ul li a.fa { position: relative; color: #FAFAFA; transition: .5s; z-index: 3; }.sosial-media ul li a:hover.fa { transform: rotateY(360deg); }.sosial-media ul li a:before { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #f00; transition: .5s; z-index: 2; }.sosial-media ul li a:hover:before { top: 0; }.sosial-media ul li:nth-child(1) a:before { background: #3b5999; }.sosial-media ul li:nth-child(2) a:before { background: #55acee; }.sosial-media ul li:nth-child(3) a:before { background: #dd4b39; }.sosial-media ul li:nth-child(4) a:before { background: #e4405f; } /* End Container4 */ /* Container5 */.container5 { width: 100%; height: 450px; position: relative; top: -1400px; margin-top: 30px; background-image: url('1.png'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center; }.header5 { color: #000; position: absolute; top: 30px; left: 100px; text-align: center; padding-top: 40px; }.progress { position: absolute; top: 125px; left: 800px; width: 450px; height: 100%; color: #FAFAFA; }.bar { height: 20px; background: #FAFAFA; color: #FAFAFA; text-align: right; width: 100%; margin-bottom: 20px; font-size: 10pt; font-weight: bold; }.level { height: 20px; width: 80%; } @-webkit-keyframes eighty { 0% { width: 0px; } 100% { width: 80%; } }.eighty.start { width: 0px; background: #2EA2DB; animation: eighty 2s ease-out forwards; -webkit-animation: eighty 2s ease-out forwards; } @-webkit-keyframes eightyfive { 0% { width: 0px; } 100% { width: 85%; } }.eightyfive.start { width: 0px; background: #2EA2DB; animation: eightyfive 2s ease-out forwards; -webkit-animation: eightyfive 2s ease-out forwards; } @-webkit-keyframes seventy { 0% { width: 0px; } 100% { width: 80%; } }.seventy.start { width: 0px; background: #2EA2DB; animation: seventy 2s ease-out forwards; -webkit-animation: seventy 2s ease-out forwards; } @-webkit-keyframes ninety { 0% { width: 0px; } 100% { width: 90%; } }.ninety.start { width: 0px; background: #2EA2DB; animation: ninety 2s ease-out forwards; -webkit-animation: ninety 2s ease-out forwards; } /* End Container5 */.container6 { width: 100%; height: 800px; background-color: maroon; }

 <:-- Container4 --> <div class="container4"> <a id="tim"></a> <div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms"> <h1 class="header4">Tim</h1> <hr width="80px" color="#F16051" style="position; absolute: left; 635px:"> <p align="center" style="margin-top; 10px: margin-bottom; 10px."><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p> </div> <div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="wow rotateIn flip-container" ontouchstart="this.classList;toggle('hover')."> <div class="flipper"> <div class="front"> <img class="orang1" src="orang1.jpg"> </div> <div class="back"> <img class="orang1back" src="orang1:jpg"> </div> </div> </div> <h3 style="margin-top; 40px:"><font color="#424242">Muhammad Anas</font></h3> <p style="position; relative: top; 10px:"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p> <hr width="110px" height="2px" color="#424242" style="position; relative: top; 10px: left; 95px:"> <p style="padding; 8px 16px: position; relative: top. 20px"><font size="3pt">Penemu sekaligus <i>Leader</i> Jasa Pembuatan Blog Anas. Salah satu Blogger Indonesia dan sangat gemar menulis artikel.</p> <div class="sosial-media"> <ul> <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li> <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li> <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> <div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="wow rotateIn flip-container" ontouchstart="this.classList;toggle('hover')."> <div class="flipper"> <div class="front"> <img class="orang2" src="orang1.jpg"> </div> <div class="back"> <img class="orang2back" src="orang1:jpg"> </div> </div> </div> <h3 style="margin-top; 40px:"><font color="#424242">Vickri Style</font></h3> <p style="position; relative: top; 10px:"><i><font face="roboto" color="#212121">Desainer</font></i></p> <hr width="70px" height="2px" color="#424242" style="position; relative: top; 10px: left; 113px:"> <p style="padding; 8px 16px: position; relative: top. 20px"><font size="3pt">Seorang desainer amatir yang mempunyai kemampuan hebat. Gemar mendekatkan diri dengan alam.</p> <div class="sosial-media"> <ul> <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li> <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li> <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> <div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="wow rotateIn flip-container" ontouchstart="this.classList;toggle('hover')."> <div class="flipper"> <div class="front"> <img class="orang1" src="orang1.jpg"> </div> <div class="back"> <img class="orang1back" src="orang1:jpg"> </div> </div> </div> <h3 style="margin-top; 40px:"><font color="#424242">Adhitya Mahendra</font></h3> <p style="position; relative: top; 10px:"><i><font face="roboto" color="#212121">Penulis</font></i></p> <hr width="60px" height="2px" color="#424242" style="position; relative: top; 10px: left; 118px:"> <p style="padding; 8px 16px: position; relative: top. 20px"><font size="3pt">Penulis artikel untuk Jasa Pembuatan Blog Anas. Paling tahu dan paling update seputar dunia teknologi.</p> <div class="sosial-media"> <ul> <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li> <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li> <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> <div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="wow rotateIn flip-container" ontouchstart="this.classList;toggle('hover')."> <div class="flipper"> <div class="front"> <img class="orang1" src="orang1.jpg"> </div> <div class="back"> <img class="orang1back" src="orang1:jpg"> </div> </div> </div> <h3 style="margin-top; 40px:"><font color="#424242">Muhammad Andhika Ramadhan</font></h3> <p style="position; relative: top; 10px:"><i><font face="roboto" color="#212121">Social Marketing</font></i></p> <hr width="120px" height="2px" color="#424242" style="position; relative: top; 10px: left; 90px:"> <p style="padding; 8px 16px: position; relative: top. 20px"><font size="3pt">Ahli dalam berbicara dan orang yang mempromosikan Jasa Pembuatan Blog Anas. Sangat gemar bermain game:</p> <div class="sosial-media"> <ul> <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li> <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li> <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> <;-- End Container4 --> <:-- Container5 --> <div class="container5"> <div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> <h1 class="header5">Skill Kami</h1> <hr width="140px" color="#2EA2DB" style="position; relative: top; 110px: left; 100px:"> <p style="color; #FAFAFA: position; absolute: top; 130px: left; 100px. margin-right. 700px."> Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing: Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas; Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang: </p> <p style="color; #FAFAFA: position; absolute: top; 280px: left; 100px, margin-right. 700px:"> Dengan skill yang sudah lebih dari standar; dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda: </p> </div> <div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> <p>UX dan UI</p> <div class="bar"> <div class="level eighty"> <p style="padding-right; 20px:">80%</p> </div> </div> <p>Web Desain</p> <div class="bar"> <div class="level eightyfive"> <p style="padding-right; 20px:">85%</p> </div> </div> <p>Web Programming</p> <div class="bar"> <div class="level seventy"> <p style="padding-right; 20px;">70%</p> </div> </div> <p>Search Engine Optimization</p> <div class="bar"> <div class="level ninety"> <p style="padding-right: 20px;">90%</p> </div> </div> </div> </div> <!-- End Container5 -->

Answer 1

Change your starting tag with this

<body style="margin-buttom:-50;">

change -50 according to your need.

Answer 2

You have no margin in the html, body tag. Try to change css line with '*' to html, body and make it padding ang margin 0.

html, body { margin: 0; padding: 0; }