unidentified space between header and body - html

Question

I have been browsing about it but i cannot relate any answer, basically there is a white gap between Header and Body, see below:
I read somewhere that some elements have default margins or padding like the <ul> but i cannot really identified as i am just getting into web.
Here is how my items are positioned:
header{
background-color: white;
position:relative;
}
p.secondaryText {
color: darkgray;
}
.menu{
background-color: dodgerblue;
}
.logo{
position: relative;
width: 100%;
}
.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division{
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body{
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body{
position: relative;
text-align: center;
}
.options-section{
text-align: center;
}
.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer{
background-color: black;
height: 200px;
}
and the menu:
ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover{
text-decoration: none;
}
I have tried the margins but doesn't have any impact.
EDIT :
you can download the project on github if you wish to, is running on node js, just node server and listen in port 9000
http://localhost:9000/index.html
.

Answer 1

As you have said, there is default styles for many elements, one of them is the UL.
All you need to do, is to override it with margin: 0.
header {
background-color: white;
position: relative;
}
p.secondaryText {
color: darkgray;
}
.menu {
background-color: dodgerblue;
}
.menu ul {
margin: 0;
}
.logo {
position: relative;
width: 100%;
}
.logo-img {
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}
.social {
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.division {
height: 2px;
width: 100%;
background-color: lightgray;
}
.img-container {
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%;
/* or any custom size */
height: 100%;
}
.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}
body {
margin: 0;
}
#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}
.main-body {
position: relative;
text-align: center;
}
.options-section {
text-align: center;
}
.services-box,
.company-box,
.contact-box {
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}
footer {
background-color: black;
height: 200px;
}
and the menu: ul {
padding: 0;
margin-left: 80px;
}
li {
display: inline;
}
li a {
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}
li a:hover {
text-decoration: none;
}
<header>
<div class="social">
<p class="secondaryText">It is a long established fact that</p>
</div>
<div class="division"></div>
<div class="logo">
<img class="logo-img" src="R/Metalplatelogo.jpg">
</div>
<div class="menu" id="myMenu">
<nav>
<ul>
<li>トップページ</li>
<li>事業内容</li>
<li>会社概要</li>
<li>お問い合わせ</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<div class="body-container">
<img class="img-container" src="http://via.placeholder.com/2000x2000">
<div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>
<div class="main-body">
<p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
<h2>屋根・外壁のことならおまかせください。</h2><br>
<p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>
</div>
<div class="options-section">
<div class="services-box">
</div>
<div class="company-box">
</div>
<div class="contact-box">
</div>
</div>
<div class="about-section">
</div>
<div class="news-section">
</div>
<div class="map">
<iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4
&q=Space+Needle,Seattle+WA" allowfullscreen="">
</iframe>
</div>
<footer>
This is the footer
</footer>

Answer 2

Could you not just make the body margin: 0; & padding: 0;? & then set the margin and padding to each element if you want margin/padding?
body {
margin: 0;
padding: 0; }