我遇到了问题。我在反馈和优惠券之间有大约60px的额外空间。有没有办法摆脱这个额外的空间？我试图让它们可堆叠，但这对我不起作用。提前抱歉不必要的div等。这是我第一次编写一个网站，很多标签都被奇怪地命名。
HTML
<div id='coupons' >
<a id="coupons" name='coupons'>
<div style="float:left">
<img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
<div id="myModal" class="modal">
<span class="close">×
</span>
<img class="modal-content" id="img01">
<div id="caption">
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</div>
</div>
<div id='pformat'>
<p>COUPONS FOR YOU!
</p>
</div>
</a>
</div>
<div id='feedback'><a id="feedback" name='feedback'>
<h1>FEEDBACK</h1>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form></div></a>
</div>
CSS
img {
position: relative;
display: block;
}
h1 {
font-family: sans-serif;
font-size: 60px;
color: #1A66FF;
font-style: italic;
text-align: center;
}
h2 {
position: absolute;
top: 190px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h3 {
position: absolute;
top: 265px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h4 {
position: absolute;
text-align: center;
font-family: sans-serif;
font-style: italic;
width: 100%;
font-size: 60px;
top: 700px;
color: #1A66FF;
}
h5 {
font-weight: normal;
position: absolute;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'hind';
}
#divp2{
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
top: 900px;
margin-left: 150px;
margin-right: 150px;
font-weight: 0;
}
@font-face {
font-family: 'hind';
src: url('C:/Users/lakes/Desktop/hind2.ttf')
}
#pformat{
text-align: center;
margin-right: 30px;
font-size: 55px;
font-family: sans-serif;
margin-left: 620px;
position: absolute;
top: 1450px;
font-style: italic;
color: #1A66FF;
font-weight: bold;
}
#opaque {
opacity: .2;
}
#divp {
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
top: 1075px;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
}
#coupons {
background-color: whitesmoke;
}
#coupons:after {
content: "";
display: table;
clear: both;
}
#feedback {
background-color: ghostwhite;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0,0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)}
to {
-webkit-transform: scale(1)}
}
@keyframes zoom {
from {
transform: scale(0.1)}
to {
transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
/* w3schools feedback form */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 40px;
margin-right: 40px;
}
答案 0 :(得分：0)
在CSS中，您可以根据需要更改margin-top。我假设你不想在它们之间留下空白。
h1 {
font-family: sans-serif;
font-size: 60px;
color: #1A66FF;
font-style: italic;
text-align: center;
margin-top: 0;
}
答案 1 :(得分：0)
您使用id =＆＃39;反馈＆＃39;两次，一次在div中，一次在＆＃39;＆lt;＆＃39; a＆＃39;＆gt;＆＃39;标签。这不会导致你的问题，而是你应该解决的问题。在h1上反馈设置边距：0 auto;
img {
position: relative;
display: block;
}
h1 {
font-family: sans-serif;
font-size: 60px;
color: #1A66FF;
font-style: italic;
text-align: center;
}
h2 {
position: absolute;
top: 190px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h3 {
position: absolute;
top: 265px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h4 {
position: absolute;
text-align: center;
font-family: sans-serif;
font-style: italic;
width: 100%;
font-size: 60px;
top: 700px;
color: #1A66FF;
}
h5 {
font-weight: normal;
position: absolute;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'hind';
}
#divp2{
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
top: 900px;
margin-left: 150px;
margin-right: 150px;
font-weight: 0;
}
@font-face {
font-family: 'hind';
src: url('C:/Users/lakes/Desktop/hind2.ttf')
}
#pformat{
text-align: center;
margin-right: 30px;
font-size: 55px;
font-family: sans-serif;
margin-left: 620px;
position: absolute;
top: 1450px;
font-style: italic;
color: #1A66FF;
font-weight: bold;
}
#opaque {
opacity: .2;
}
#divp {
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
top: 1075px;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
}
#coupons {
background-color: whitesmoke;
}
#coupons:after {
content: "";
display: table;
clear: both;
}
#feedback {
background-color: ghostwhite;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0,0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)}
to {
-webkit-transform: scale(1)}
}
@keyframes zoom {
from {
transform: scale(0.1)}
to {
transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
/* w3schools feedback form */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 40px;
margin-right: 40px;
}<div id='coupons' >
<a id="coupons" name='coupons'>
<div style="float:left">
<img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
<div id="myModal" class="modal">
<span class="close">×
</span>
<img class="modal-content" id="img01">
<div id="caption">
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</div>
</div>
<div id='pformat'>
<p>COUPONS FOR YOU!
</p>
</div>
</a>
</div>
<div id='feedback'><a id="feedback" name='feedback'>
<h1 style='margin:0 auto'>FEEDBACK</h1>
<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form></div></a>
</div>