我如何摆脱这个白色 space？
How do I get rid of this white space?
我正在创建一个 div，用户可以在其中对 class 发表评论。在评论结束时，将有文本："Show More" 加载更多评论。但是，在最后的评论和 "Show More" 文本之间有一个白色的 space。 我该如何摆脱它？
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* courses.php */
#star_score {
font-size: 20px;
color: #777;
position: relative;
top: -50px;
left: 265px;
}
.Rating2, .Rating3 {
position: relative;
width: 125px;
height: 25px;
top: -41px;
left: 180px;
}
.Rating2 {
top: -24px;
left: 130px;
}
.Rating3 {
width: 75px;
height: 15px;
position: absolute;
top: 70px;
left: -88px;
}
.Rating2 svg, .Rating3 svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating2 meter, .Rating3 meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating2 meter::-moz-meter-bar, .Rating3 meter::-moz-meter-bar {
background: #FF7867;
}
.Rating2 meter::-webkit-meter-optimum-value, .Rating2 meter::-webkit-meter-suboptimum-value, .Rating2 meter::-webkit-meter-even-less-good-value, .Rating3 meter::-webkit-meter-optimum-value, .Rating3 meter::-webkit-meter-suboptimum-value, .Rating3 meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
/* Reviews */
#course_reviews {
border: 1px solid #DDD;
background: white;
width: 579px;
padding: 15px;
font-family: 'Open Sans', sans-serif;
position: relative;
left: 50px;
top: -20px
}
#review_text {
font-size: 18px;
font-weight: bold;
}
#course_line2 {
width: 610px;
height: 1px;
background: #ddd;
position: relative;
top: -38px;
left: -15px;
}
#student_rating {
position: relative;
left: -15px;
width: 610px;
margin-bottom: 10px;
}
#student_rating_img {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
top: -20px;
left: 20px;
}
#student_username {
color: #00698C;
position: relative;
top: -88px;
left: 100px;
width: 490px;
}
#student_date {
font-size: 14px;
color: #999;
}
#student_content {
color: #0E0E0F;
width: 490px;
position: relative;
top: 5px;
}
#show_more {
padding: 10px;
border-top: 1px solid #ddd;
position: relative;
left: -15px;
width: 590px;
cursor: pointer;
}
#show_more:hover {
text-decoration: underline;
}
#show_more_text {
position: relative;
top: 8px;
left: 10px;
}
/* End of Reviews */
/* end of courses.php */
<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<br> <br> <br>
<!-- Reviews -->
<!-- Top Part -->
<div id='course_reviews'>
<span id='review_text'> 2937 Reviews </span>
<div class="Rating2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4.28"></meter>
</div> <span id='star_score'> 4.7 </span>
<div id='course_line2'></div>
<!-- End of Top Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Show More -->
<div id='show_more'> <span id='show_more_text'> Show More </span> </div>
<!-- End of Show More -->
</div>
<!-- End of Reviews -->
开始之前，我注意到您所有的 student-rating div 都具有相同的 ID 值。请注意，这是无效的 HTML，因为您不应在一个页面上使用相同 ID 的多个元素。您应该使用 class="student-rating" 而不是 id=。对于此答案的其余部分，我将假设您已经完成了此操作。请注意，我下面的代码只有在您这样做时才有效。
您遇到的主要问题是由于您将评论 div 中的所有元素定位为负数 top。
尽管您已将它们彼此相对定位，但实际的 student-rating div 最终在底部有一个无法轻易闭合的大缝隙。
你还有一个由 margin-bottom:10px 造成的额外间隙，这使得白色 space 更大。
有一种快速而肮脏的方法可以解决这个问题，还有一种更困难的解决方案，最终会使您的代码整体变得更好。
首先，快速解决方案：
首先，将 'Show more' 元素移到 course-reviews 元素之外，这样下面的代码会影响最后的评论，而不是显示更多按钮。然后，添加以下代码：
.student-rating:last-of-type {
margin-botton:-15px;
}
这将覆盖上次审核的底部边距，应该可以很好地缩小差距。如果需要，请随意调整确切值，但 -15px 对我来说看起来很合适。
这个解决方案相当'hacky'；这不是好的代码，但它适用于你所拥有的。下面更好的解决方案是修复您现有的代码，这样就不需要这样的黑客攻击了。
你是怎么做到的？好吧，在这里给出答案太长了，但简而言之，您需要摆脱 [=11] 中元素的 CSS 中的所有负 top 值=].从最大的一个开始并将其设置为零，然后将所有其他的调整为相同的量。评级块的布局在视觉上应保持相同，但它应该更容易正确定位。我注意到您也有一些负 left 值。当你在做的时候，这些也应该被删除。
我的猜测是您添加了负的 top 和 left 值以补偿其他布局故障，因此一旦您完成这些故障，这些问题可能也需要解决。不过这次没有使用负定位！
我正在创建一个 div，用户可以在其中对 class 发表评论。在评论结束时，将有文本："Show More" 加载更多评论。但是，在最后的评论和 "Show More" 文本之间有一个白色的 space。 我该如何摆脱它？
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* courses.php */
#star_score {
font-size: 20px;
color: #777;
position: relative;
top: -50px;
left: 265px;
}
.Rating2, .Rating3 {
position: relative;
width: 125px;
height: 25px;
top: -41px;
left: 180px;
}
.Rating2 {
top: -24px;
left: 130px;
}
.Rating3 {
width: 75px;
height: 15px;
position: absolute;
top: 70px;
left: -88px;
}
.Rating2 svg, .Rating3 svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating2 meter, .Rating3 meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating2 meter::-moz-meter-bar, .Rating3 meter::-moz-meter-bar {
background: #FF7867;
}
.Rating2 meter::-webkit-meter-optimum-value, .Rating2 meter::-webkit-meter-suboptimum-value, .Rating2 meter::-webkit-meter-even-less-good-value, .Rating3 meter::-webkit-meter-optimum-value, .Rating3 meter::-webkit-meter-suboptimum-value, .Rating3 meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
/* Reviews */
#course_reviews {
border: 1px solid #DDD;
background: white;
width: 579px;
padding: 15px;
font-family: 'Open Sans', sans-serif;
position: relative;
left: 50px;
top: -20px
}
#review_text {
font-size: 18px;
font-weight: bold;
}
#course_line2 {
width: 610px;
height: 1px;
background: #ddd;
position: relative;
top: -38px;
left: -15px;
}
#student_rating {
position: relative;
left: -15px;
width: 610px;
margin-bottom: 10px;
}
#student_rating_img {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
top: -20px;
left: 20px;
}
#student_username {
color: #00698C;
position: relative;
top: -88px;
left: 100px;
width: 490px;
}
#student_date {
font-size: 14px;
color: #999;
}
#student_content {
color: #0E0E0F;
width: 490px;
position: relative;
top: 5px;
}
#show_more {
padding: 10px;
border-top: 1px solid #ddd;
position: relative;
left: -15px;
width: 590px;
cursor: pointer;
}
#show_more:hover {
text-decoration: underline;
}
#show_more_text {
position: relative;
top: 8px;
left: 10px;
}
/* End of Reviews */
/* end of courses.php */
<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<br> <br> <br>
<!-- Reviews -->
<!-- Top Part -->
<div id='course_reviews'>
<span id='review_text'> 2937 Reviews </span>
<div class="Rating2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4.28"></meter>
</div> <span id='star_score'> 4.7 </span>
<div id='course_line2'></div>
<!-- End of Top Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Student Part -->
<div id='student_rating'>
<img src='https://cdnil1.fiverrcdn.com/photos/31519238/small/1459227_10151771032542219_1796077253_n.jpg?1461604087' id='student_rating_img'>
<!-- Student Usernames -->
<div id='student_username'> Matthew Malan <span id='student_date'> 1 day ago </span> <br>
<span id='student_content'> Outstanding Experience! </span>
<!-- Student Rating -->
<div class="Rating3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4"></meter>
</div>
<!-- End of Student Rating -->
</div>
<!-- End of Student Usernames & Stars -->
</div>
<!-- End of Student Part -->
<!-- Show More -->
<div id='show_more'> <span id='show_more_text'> Show More </span> </div>
<!-- End of Show More -->
</div>
<!-- End of Reviews -->
开始之前，我注意到您所有的 student-rating div 都具有相同的 ID 值。请注意，这是无效的 HTML，因为您不应在一个页面上使用相同 ID 的多个元素。您应该使用 class="student-rating" 而不是 id=。对于此答案的其余部分，我将假设您已经完成了此操作。请注意，我下面的代码只有在您这样做时才有效。
您遇到的主要问题是由于您将评论 div 中的所有元素定位为负数 top。
尽管您已将它们彼此相对定位，但实际的 student-rating div 最终在底部有一个无法轻易闭合的大缝隙。
你还有一个由 margin-bottom:10px 造成的额外间隙，这使得白色 space 更大。
有一种快速而肮脏的方法可以解决这个问题，还有一种更困难的解决方案，最终会使您的代码整体变得更好。
首先，快速解决方案：
首先，将 'Show more' 元素移到 course-reviews 元素之外，这样下面的代码会影响最后的评论，而不是显示更多按钮。然后，添加以下代码：
.student-rating:last-of-type {
margin-botton:-15px;
}
这将覆盖上次审核的底部边距，应该可以很好地缩小差距。如果需要，请随意调整确切值，但 -15px 对我来说看起来很合适。
这个解决方案相当'hacky'；这不是好的代码，但它适用于你所拥有的。下面更好的解决方案是修复您现有的代码，这样就不需要这样的黑客攻击了。
你是怎么做到的？好吧，在这里给出答案太长了，但简而言之，您需要摆脱 [=11] 中元素的 CSS 中的所有负 top 值=].从最大的一个开始并将其设置为零，然后将所有其他的调整为相同的量。评级块的布局在视觉上应保持相同，但它应该更容易正确定位。我注意到您也有一些负 left 值。当你在做的时候，这些也应该被删除。
我的猜测是您添加了负的 top 和 left 值以补偿其他布局故障，因此一旦您完成这些故障，这些问题可能也需要解决。不过这次没有使用负定位！