我正在尝试通过 HTML/CSS/JS 重新创建保时捷网站。我试图通过用标签包装它来创建一个(“构建你的保时捷”)链接。然而，当我这样做时，它会在页面中创建大量额外空间。
我试过使用
overflow: hidden;
方法，但是没用。有谁知道为什么吗？
我的 HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id = "links">
<link href = "element.css" type ="text/css" rel = stylesheet>
<script src = "functions.js"></script>
</div>
<title> Porsche </title>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="https://fontmeme.com/porsche-font/" rel = stylesheet>
</head>
<body>
<video id = "fast_cars" muted loop width= "1350" height = "1000" autoplay>
<source src = "Porsche-main.mp4" type = "video/mp4">
<!-- Error Message -->
Your browser does not support this video
</video>
<div id = "video_screen">
<h1 id = "porsche">
Porsche
</h1>
<a id = "cool_stuff" href = "https://www.porsche.com/usa/eventsandracing/"><h2 id = "button_main"> Rediscover Driving </h2></a>
</div>
<div id = "under_video">
<div id = "images">
<img id = "718" src = "718_p.jpg" alt = "718 Porsche" />
<img id = "911" src = "911_p.jpg" alt = "911 Porsche" />
<img id = "cayene" src = "cayene_p.jpg" alt = "Porsche Cayan" />
<img id = "macan" src = "macan_p.jpg" alt = "Porsche Macan" />
<img id = "panarama" src = "panarama_p.jpg" alt = "panarama" />
</div>
<div id = "black_main"></div>
</div>
<h2 id = "para_text"> Producing state-of-the-art sport and racing automobiles since 1931 </h2>
<a id = "link2" href = "https://www.porsche.com/usa/modelstart/"><h1 id = "builder"> Build Your Porsche </h1></a>
</body>
</html>
我的 CSS:
body {
background-color: black;
}
@font-face{
font-family: logo_font;
src: url('911porschav3title.ttf');
}
#fast_cars {
position: relative;
bottom: 180px;
overflow: hidden;
border: 0px solid black;
}
#porsche {
color: white;
border: 0px dotted white;
width: 850px;
font-family: '911 Porscha Title', 'Exo 2', sans-serif;
position: relative;
bottom: 790px;
left: 255px;
font-size: 70px;
overflow: hidden;
letter-spacing: 20px;
}
#button_main{
color: white;
border: 1px solid white;
width: 210px;
font-family: 'Exo 2', sans-serif;
position: relative;
bottom: 800px;
left: 570px;
background-color: transparent;
padding: 10px 10px;
text-align: center;
border-width: 4px;
text-decoration: none;
}
img {
position: relative;
bottom: 600px;
overflow: hidden;
left: 46px;
z-index : 1;
}
#cool_stuff {
text-decoration: none;
}
#black_main{
border: 4px solid white;
height: 700px;
position: relative;
bottom: 900px;
border-right-style: dashed;
border-left-style: dashed;
}
#para_text {
border: 0px solid white;
color: white;
position: relative;
bottom: 1300px;
width: 740px;
left: 285px;
font-family: 'Exo 2', sans-serif;
text-decoration: underline;
}
#builder {
color: white;
position: relative;
bottom: 1200px;
width: 280px;
left: 500px;
border: 4px solid white;
padding: 10px 24px;
font-family: 'Exo 2', sans-serif;
text-align: center;
overflow: hidden;
}
#link2 {
overflow: hidden;
}
最佳答案
浏览器将为某些标签设置默认样式。例如，Chrome 会为 h1 设置如下样式。我认为您看到的空间是由“display: block and -webkit-margin-*”引起的。
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
通常我们会在开头包含一个cleanup css，例如normalize.css
关于html - <h1> 包裹在 <a> 链接中，在网页中创建空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47019635/