Web-Student214 Web-Student214 - 1 month ago 6
CSS Question

how do i remove white space above div after setting margin-top to h1?

hey i am working on my portfolio for class and im trying to remove white space above the div i have my h1 in. i added an h1 but i dont want it to be all the way on top of the div so when i add a margin-top on it creates white space above the div. how do i remove this?

<!DOCTYPE html>
<html lang = "en-us">

<head>

<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">

<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">

</head>

<body>

<header>
<div class="header-bg"></div>

<div class="header-dark">

<div class="wrapper">

<div class = "heading">Hi. My Name is</div>

<div class = "box-name">Carlos Elizondo</div>

<div class = "heading">I'm a future web developer and current student </div>

<ul>

<li>
<a href="#" class="ion-social-facebook"></a>
</li>

<li>
<a href="#" class="ion-social-twitter"></a>
</li>

<li>
<a href="#" class="ion-social-linkedin"></a>
</li>

</ul>

</div>

</div>

<nav class = "clearfix">

<a href = "index.html" class = "logo" CE>CE</a>

<a href = "#" class = "nav-links last">Contact</a>

<a href = "#" class = "nav-links">Portfolio</a>

<a href = "#" class = "nav-links">Skills</a>

<a href = "#" class = "nav-links ">About Me</a>

</nav>

</header>

<div class = "about-container">

<h1 class = "title">About Me</h1> //this is the h1 i am trying to edit




</div>





</body>

</html>


----------------------------------------CSS-------------------------------------

*{
margin: 0;
padding: 0;
}


body{
margin: 0;
font-family: sans-serif;
padding: 0;
}


header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;


}

.header-bg{

position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

}

.header-dark{

position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;

}

.wrapper{

width: 850px;
height: auto;
margin-top: -50px;
}


h2{
color: white;
text-align: center;
letter-spacing: 0.1em;

}

h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}

ul{

list-style-type: none;
text-align: center;
padding: 0;

}

ul li{

display: inline-block;
padding: 0 13px;


}


.ion-social-facebook{
color: white;
font-size: 28px;

}

.ion-social-facebook:visited{
color: white;
}

.ion-social-facebook:visited{
color: white;
}

.ion-social-twitter{

color: white;
font-size: 28px;
}

.ion-social-linkedin{
color: white;
font-size: 28px;
}


nav{
position: fixed;
width: 100%;
height: auto;

}

.nav-links{
float: right;
color: white;
margin: 20px 10px;
text-decoration: none;
}

.nav-links.last{
margin-right: 30px;
}

.logo:link{

margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;

}

.heading{
color: white;
text-align: center;
font-size: 30px;

}

.box-name{
color: white;
text-align: center;
border: 4px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}

.about-container{
position: relative;
width: 100%;
height: 600px;
margin-bottom: 40px;
background-color: #d8d8d8;
margin-top: 0;


}

.title{


color: #777777;
text-align: center;
margin: 0px;
margin-top: 20px;



}

Answer

You could simply switch from margin-top: 20px; to padding-top: 20px;

Edit

Margin and padding are different because margin depart the element from the other and padding just add some "transparent" space that increase the size of the element but it keep it close to the others, if you want to know more about this read:

https://css-tricks.com/almanac/properties/p/padding/

https://css-tricks.com/almanac/properties/m/margin/