我不知道为什么我的图像和边框/轮廓之间有一个开放空间。我已将所有边框、边距和填充设置为 0。我什至试图消除任何可能的溢出，但它仍然存在。我想尝试使用chrome的开发人员工具解决它，但没有成功。如果你们能看一看并尝试弄清楚发生了什么，我会很高兴。如果您需要更多信息，请告诉我。谢谢。
var click = 0;
function checkClicks(imgs) {
if(click == 0) {
// Run your animation on first click
document.getElementById('column1').classList.add('animate1')
document.getElementById('column2').classList.add('animate2')
document.getElementById('column3').classList.add('animate3')
document.getElementById('column4').classList.add('animate4')
document.getElementById('column5').classList.add('animate5')
document.getElementById('column6').classList.add('animate6');
// hold Images for 1s
setTimeout(function(){
myFunction(imgs);
}, 2000);
} else {
myFunction(imgs);
}
click = 1;
}
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
var imgParagraph = document.getElementById('img-paragraph');
imgParagraph.innerHTML = imgs.getAttribute("head");
expandImg.parentElement.style.display = "table-cell";
imgParagraph.style.display = 'table-cell';
}@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
}
/* Style the images inside the grid */
.column img {
cursor: pointer;
background-color:black;
}
.column img:hover {
background-color:black;
filter: brightness(70%);
}
#totalbody {
background-color: #EEF0FC;
height: 600px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
position: absolute;
width: 40%;
top:160px;
left:20px;
border-radius:7px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 400px;
width: 50%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 7px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 80px;
}
.head1 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head2 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head3 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head4 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head5 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head6 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.head1::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.head2::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.head3::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.head4::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.head5::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.head6::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
.para1{
width: 90%;
position: relative;
left: 6%;
font-size: 17px;
top: 60px;
font-family: 'futuralight';
}
#column1 {
position: absolute;
width:250px;
float:left;
left:600px;
top:30px;
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
}
.animate1 {
-webkit-animation: animate1 2s normal ease-out;
animation: animate1 2s forwards normal ease-out;
}
@-webkit-keyframes animate1 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:50px;
}
}
@keyframes animate1 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:50px;
}
}
#column2 {
position: absolute;
width:200px;
float:left;
left:300px;
top:50px;
}
.animate2 {
-webkit-animation: animate2 2s normal ease-out;
animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:300px;
}
}
@keyframes animate2 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:300px;
}
}
#column3 {
position: absolute;
width:200px;
float:left;
left:200px;
top:80px;
}
.animate3 {
-webkit-animation: animate3 2s normal ease-out;
animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:500px;
}
}
@keyframes animate3 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:500px;
}
}
#column4 {
position: absolute;
width:200px;
float:left;
left:300px;
top:80px;
}
.animate4 {
-webkit-animation: animate4 2s normal ease-out;
animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:700px;
}
}
@keyframes animate4 {
0% {
top:00px;
}
100% {
position: absolute;
top: 500px;
left:700px;
}
}
#column5 {
position: absolute;
width:200px;
float:left;
left:300px;
top:80px;
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
}
.animate5 {
-webkit-animation: animate5 2s normal ease-out;
animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
0% {
top:00px;
}
100% {
position: absolute;
top: 800px;
left:700px;
padding-bottom:500px;
}
}
@keyframes animate5 {
0% {
top:00px;
}
100% {
position: absolute;
top: 800px;
left:700px;
margin-bottom:500px;
}
}
#column6 {
position: absolute;
width:300px;
float:left;
left:600px;
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
overflow:none;
}
.animate6 {
-webkit-animation: animate6 2s normal ease-out;
animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
0% {
top:00px;
}
100% {
position:absolute;
top: 800px;
left:50px;
}
}
@keyframes animate6 {
0% {
top:00px;
}
100% {
position:absolute;
top: 800px;
left:50px;
}
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" />
<script src='../Javascript/script.js'></script>
<script src='../Javascript/fix.js'></script>
<script src='../Javascript/jquery-3.5.1.min.js'></script>
<title>Projects</title>
</head>
<body id='totalbody'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="active-menu" href="projects.html">Projects</a>
<a class="link" href="communityservice.html">Community Service</a>
</header>
<div>
<div id="expanded-wrapper">
<img id="expandedImg">
<p id="img-paragraph"></p>
</div>
</div>
<div class="row">
<div class="column" id='column1'>
<img src="../Images/arcade.jpeg" alt="Arcade" style="width:100%" head="<p class='head1'> Parapraph #1 </p><p class='para1'> Lorem ipsum dolor si
t amet consectetur adipisicing
elit. Sed natus, recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so
luta placeat repellat asperiores iure eos dolorum fugiat?</p>" onclick="checkClicks(this);">
</div>
<div class="column" id='column2'>
<img src="../Images/car.jpeg"
alt="Car" style="width:100%" head="<p class='head2'> Parapraph #2 </p>" onclick="checkClicks(this);">
</div>
<div class="column" id='column3'>
<img src="../Images/pinball.jpeg" alt="Pinball Machine" style="width:100%" head="<p class='head3'> Parapraph #3 </p>" onclick="checkClicks(this);">
</div>
<div class="column" id='column4'>
<img src="../Images/vending.jpeg" alt="Vending Machine" style="width:100%" head="<p class='head4'> Parapraph #4 </p>" onclick="checkClicks(this);">
</div>
<div class="column" id='column5'>
<img src="https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5e7b54939f46de0006e48f1c%2F0x0.jpg" alt="Lights" style="width:100%" head="<p class='head5'> Parapraph #5 </p>" onclick="checkClicks(this);">
</div>
<div class="column" id='column6'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTWUVh_Aa4CeLecqvG5L-Xzej1kc1tKwDriiWAVWuUMms5JLHQt&usqp=CAU" alt="Lights" style="width:100%" head="<p class='head6'> Parapraph #6 </p>" onclick="checkClicks(this);">
</div>
</div>
</div>
</body>
</html>这是因为图像是一个内联元素，因此行为类似于文本。您可以通过使<img>标签使用display: block或通过在<div>上设置font-size: 0或line-height: 0来摆脱这种效果。