html - 我的 html 代码在一些在线编辑器（如 codepen）中没有任何空格

问题描述

我正在通过 freecodecamp 学习 Web 开发，我完成了 HTML 和 CSS 课程并且我已经建立了一些项目，我的最后一个项目是一个产品登陆页面。这是网址：https ://mus733.github.io/

里面的代码：https ://github.com/mus733/mus733.github.io

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1000">
    <title>Document</title>
</head>
<body>
  <div id="container">
 <header id="header">

     <img id="header-img" src="https://i.imgur.com/afdoxZ5.png" alt="Mercedes Benz Logo">

    <nav id="nav-bar">
       <a href="#middle-content" class="nav-link"> Feature</a> 
        <a href="#Youtube-video" class="nav-link">How it Works </a>
        <a href="#price-container" class="nav-link">Price</a>


    </nav>
    </header>   
    </div> 

    <div id="content">
        <h1>The New S Class , feel the intelligent drive</h1>
        </div>


            <form id="form" action="https://www.freecodecamp.com/email-submit" >
                <input id="email" type="email" placeholder="enter your email here" name="email">


                <input id="submit"  type="submit">





            </form>
<div class="middle-content" id="middle-content">

    <img class="icon" src="https://imgur.com/yQfRCem.png" alt="icon1">
    <div class="text-align">We have smartphones, so why wouldn’t we expect our cars to have some intelligence themselves? With Mercedes-Benz Intelligent Drive, you’ll have access to a suite of driving assistance systems that always seem to be one step ahead of you.</div>
</div>    

<div class="middle-content">
    <img class="icon" src="https://imgur.com/WXnhs8Q.png" alt="icon2">
    <div class="text-align">Mercedes-Benz COMAND® maps are designed to help you get to your destination by providing clear directions, as well as plenty of advance notice for upcoming turns along the way.</div>
</div>

<div class="middle-content">


    <img class="icon" src="https://i.imgur.com/sdQaxdN.png" alt="icon3">
    <div class="text-align">Mercedes-Benz's signature Pre-Safe technology will help warn drivers whenever there's an imminent accident. This technology will also help prepare the vehicle for the collision by tightening seatbelts, closing the sunroof and windows, and even adjust front head restraints.</div>

</div>


<div id="Youtube-video">
    <iframe id="video" width="646" height="363" src="https://www.youtube.com/embed/mQLK6c5vOHM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>


<div id="price-container">
    <div id="price-control">

        <div id="price1" class="price-css">
            <div class="shadow"></div>
            <div class="price-text">
                <h1>$104,000</h1>
                <h2>Top-notch interior</h2>
                <h2>Posh, pampering seating </h2>
                <h2>Supremely comfortable ride</h2>

                <button>Select</button>
            </div>

        </div>

        <div id="price2" class="price-css">
            <div class="shadow"></div>
            <div class="price-text">
                <h1>$200,000</h1>
                <h2>Massaging front seats</h2>
                <h2>Proximity keyless entry</h2>
                <h2>AMG S 65 coupe and cabriolet </h2>
                <button>Select</button>

            </div>

        </div>












    </div>
</div>
<div id="footer-parent">
<footer>

<ul>Privacy</ul>
<ul id="terms">Terms</ul>
<ul>Contact</ul>



</footer>
<div id="copyright">Copyright 2020, Mercedes-Benz</div>

</div>







</body>
</html>

也是我的CSS：





body{

    background-color:#ecf0f1;
    margin: 0;
    font-family: roboto;
    color: #1e272e;


}
h1{
    color:#1e272e ;
    font-weight: lighter;
    font-size: 45px;
}
h2{
    color:#1e272e ;
    font-size: 17px;
}

header{

    background-color: #2c3e50;
    height: 80px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:#ecf0f1 ;
    position: fixed;
    border-bottom: solid;
    border-color: #4e9ce9;
    border-width: 5px;







}
@media(max-width: 400px){
    #nav-bar{
        font-size: 10px;
    }
}


#nav-bar{
    font-size: 20px;

}

#content{
    display: flex;
    justify-content: center;
    padding-top: 100;

}
#submit{
    width: 150px;
    margin: 20;
    height: 30px;
    font-size: 17px;
    color:#1e272e ;
    background-color: #f1c40f;
    border-color:#ecf0f1;
    border: none;
    font-weight: bolder;


}
#submit:hover{
    background-color:#f39c12 ;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    

}
#email{

    width: 400px;
    height: 30px;

}


#header-img{
    max-width: 4.5%;
    height:auto;
    margin-left: 20px;

}
nav{
    display: flex;
    float: left;
    justify-items: flex-start;
    margin: 140;

}    
.nav-link{
    margin-left: 80;
    margin-right: 20;
}
.middle-content{
    width: 800px;
    height: auto;

    display: flex;
    align-items: center;

    justify-content: space-around;
    margin: auto;

    padding-top: 50;




}







.icon{
    max-width: 10%;
    height: auto;



}
.text-align{
    margin: 30;
}







#video{
    max-width: auto;
    margin: auto;
    padding-top: 100;
}
#youtube-video{
    display: flex;
}


.price-css{
    width: 300px;
    height: 350px;
    background-color:#c5dff7;
    border: 1px solid rgb(70, 69, 69);
    border-radius: 3px;

}


#price-container{
    width: 800px;
    height: auto;
    background-color: #ecf0f1;
    margin: auto;

}
#price-control{
    display: flex;
    justify-content: space-around;
    margin: 90;
}
#price1{
    margin-right: 90;
    background-color: #ecf0f1;


}
#price2{
    background-color: #ecf0f1;

}
.shadow{
    width: auto;
    height: 50px;
    background-color: #f1c40f;
    border-bottom: #f1d667 solid;
}
.price-text{
    text-align: center;
}

footer{

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: auto;

}
#copyright{
    display: flex;
    justify-content: center;
    font-size: 12px;
    font-weight: lighter;
    font-style: oblique;
}

#footer-parent{
    color:  #ecf0f1 ;






    width: 50%;
    margin: auto;
    height: 70px;
    background-color: #2c3e50;
    border-radius: 2px;

}
#terms{
    margin-right: 35;
}


button{
    margin-top: 30;
    width: 150px;
    height: 28px;
    background-color: #f1c40f;
    border-color:#ecf0f1;
    border: none;
    font-weight: bold;
    font-size: 17px;
    color:#1e272e ;

}
a{
text-decoration: none;
color: #ecf0f1;
display: flex;
align-items: center;
}

问题是当我将代码放入 codepen 时，我的页面元素出现时元素之间没有任何空格

问题的 URL：https ://codepen.io/mustafa-adnan1997/pen/rNxeyyL

你能帮我知道我的问题是什么吗

标签： htmlcss

html - 我的 html 代码在一些在线编辑器（如 codepen）中没有任何空格

问题描述

解决方案

推荐阅读