Question

I'm trying to re-create the Porsche website through HTML/CSS/JS. I am trying to create a ("build your Porsche") link by wrapping it with a tag. When I do this, however, it creates a lot of extra space in the page.

I have tried using the

  overflow: hidden;

method, but it doesn't work. Does anyone know why?

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

My 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;

}

Answer 1

浏览器将为某些标记设置默认样式。例如，Chrome会为h1设置以下样式。我认为你看到的空间是由＆＃34; display：block和-webkit-margin - *＆＃34;。

引起的。

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;

通常我们会在开头添加一个清理css，例如normalize.css

<h1>包裹在<a> link creating empty space in web page

1 个答案: