Vincent Vincent - 3 months ago 19
CSS Question

Removing Vertical White Space Between Divs

I'm currently trying to create a HTML/CSS version of a resume with different sections (Header with name and contact info, Experience, Education, etc...).

There is a lot of white space between each vertically stacked div that I can't seem to get rid of.



#header {
height: 15%;
width: 98.5%;
display: relative;
background: #C3CDD4;
}

#header p {
font-family: Verdana, Geneva, sans-serif;
}


#name {
font-size: 40px;
float: left;
left: 20px;
bottom: 100px;
top: -10px;
position: relative;
}

#address {
top: 20px;
left: 360px;
position: relative;

}

#contact {
top: 10px;
left: 300px;
position: relative;

}

.subheader {
margin-left: 25px;
display: relative;
background: red;
}

.subheader_title {
font: 30px Verdana lighter;
}


.line {
margin-top: -25px;
margin-left: 20px;
height: 1px;
width: 96%;
background-color: black;
display: relative;
}

.content {
margin-left: 30px;
height: 15%;
width: 100%;
background: blue;
}

.content p{
margin: 5px;
}


.left, .right {
height: 100px;
vertical-align: top;
}

.left {
display: inline-block;
width: 60%;
}

.left p{
font-family: Verdana;
font-size: 15px;
top: 6px;
position: relative;
}

.right {
display: inline-block;
width: 35%;
}

.right p {
font-family: Verdana;
font-size: 15px;
top: 6px;
position: relative;
}

#graduation {
left: 335px;
position: relative;
}


#graduation_date {
left: 415px;
position: relative;
}



.location {
font-weight: bold;
}

#test {
position: relative;
background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>

<body>
<div id="header">
<div class="left">
<p id="name"> Vincent Joe Kool </p>
</div>
<div class="right">
<p id="address">29283 Kool Drive</p>
<p id="contact">383.292.2793 · joekool@gmail.com</p>
</div>
</div>

<div class="subheader">
<p class="subheader_title">Education</p>
</div>

<div class="line"></div>

<div class="content">
<div class="left">
<p class="location">University of California, Irvine</p>
<p id="school">Donald Bren School of Information & Computer Science</p>
<p id="degree"> Bachelor of Science in Computer Science </p>

</div>

<div class="right">
<p id="graduation">Expected Graduation</p>
<p id="graduation_date">June 2020</p>
</div>
</div>

<div class="subheader">
<p class="subheader_title">Experience</p>
</div>

<div class="line"></div>

<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>




Answer

Remove the default margin of p.

#header {
height: 15%;
width: 98.5%;
display: relative;
background: #C3CDD4;
} 

#header p {
  font-family: Verdana, Geneva, sans-serif;
}

p{
margin: 0;
}


#name {
    font-size: 40px;
    float: left;
    left: 20px;
    bottom: 100px;
    top: -10px;
    position: relative;
}

#address {
    top: 20px;
    left: 360px;
    position: relative;

}

#contact {
top: 10px;
left: 300px;
position: relative;

}

.subheader {
margin-left: 25px;
display: relative;
background: red;
}

.subheader_title {
font: 30px Verdana lighter;
}


.line {
margin-left: 20px;
height: 1px;
width: 96%;
background-color: black;
display: relative;
}

.content {
margin-left: 30px;
height: 15%;
width: 100%;
background: blue;
}

.content p{
margin: 5px;
}


.left, .right {
height: 100px;
vertical-align: top;
}

.left {
display: inline-block;
width: 60%;
}

.left p{
font-family: Verdana;
font-size: 15px;
top: 6px;
position: relative;
}

.right {
display: inline-block;
width: 35%;
}

.right p {
font-family: Verdana;
font-size: 15px;
top: 6px;
position: relative;
}

#graduation {
left: 335px;
position: relative;
}


#graduation_date {
left: 415px;
position: relative;
}



.location {
font-weight: bold;
}

#test {
position: relative;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	<title></title>
</head>

<body>
    <div id="header">
        <div class="left">
            <p id="name"> Vincent Joe Kool </p>
        </div>
        <div class="right">
            <p id="address">29283 Kool Drive</p>
            <p id="contact">383.292.2793 · joekool@gmail.com</p>
        </div>
   </div>
    
    <div class="subheader">
        <p class="subheader_title">Education</p>
   </div>
   
   <div class="line"></div>
   
   <div class="content">
        <div class="left">
            <p class="location">University of California, Irvine</p>
            <p id="school">Donald Bren School of Information & Computer Science</p>
           <p id="degree"> Bachelor of Science in Computer Science </p>
        
        </div>
            
        <div class="right">
            <p id="graduation">Expected Graduation</p>
            <p id="graduation_date">June 2020</p>
        </div>
   </div>

   <div class="subheader">
        <p class="subheader_title">Experience</p>
   </div>
   
   <div class="line"></div>

    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
 </body>
</html>