Question

我目前正在尝试使用不同的部分创建简历的HTML / CSS版本（包含姓名和联系信息的标题，经验，教育等...）。

每个垂直堆叠的div之间有很多空白区域，我似乎无法摆脱它。

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

删除margin的默认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>

删除Div之间的垂直空白区域

1 个答案: