写两段，这些是隔开的！ IDK为什么

Question

写了两段，这些是分开的。我的段落很远，我不明白为什么。

我试图取消链接 css 个文件，在两段之间有一个空行：代码中缺少。

我的页面：

<div class="sharp">
    <p class="title">Chi sono?</p><p class="content">Seguimi su Twitter!</p>
</div>

我所有的CSS:

    *{
    margin: 0;
    height: 100%;
        }

        .title{
            color: #2d3436;
            text-align: center;
            text-shadow: 3px 2px #b2bec3;
            font-size: 50px;
            font-weight: bold;
        }

        .content{
            color: #2d3436;
            text-align: center;
            text-shadow: 2px 1px #b2bec3;
            font-size: 25px;
            font-weight: lighter;
        }

        hr {
            width: 95%;
            height: 2px;
            margin-left: auto;
            margin-right: auto;
            background-color:#666;
            border: 0 none;
            margin-top: 20px;
            margin-bottom:20px;
        }

        .space{
            height: 100px;
        }

        .dark{
            margin: auto;
            padding: 20px;
            background: #000;
            color: #fff;
            width: 85%;
            height: 80px;
        }

        .sharp{
            margin: auto;
            padding: 20px;
            background: #fff;
            border-radius: 25px;
            border: 1px solid #dfe4ea;
            width: 85%;
            box-shadow: 5px 10px 8px #888888;
        }

        body{
            width: 100%;
            background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
            background-repeat: no-repeat;
            background-size: 4000px 4000px;
        }

        .img-container{
            background-image: url(../data/images/hero.png);
            height: 70%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            z-index:1;
        }

        .inner-container{
            text-align: center;
            width: 100%;
            color: #fff;
            position: absolute;
            height: auto;
            margin-top: 200px;
        }

        h1{
            font-size: 7em;
            font-family: "Shadows into Light", Sans Serif;
        }

        h2{
            margin-top: -17px;
            font-family: "Source Sans Pro", Sans Serif;
            font-size: 1.7em;
            text-align: center;
            font-weight:400;
        }

        a{
            margin-top: 20px;
            font-size: 1.3em;
            font-family: "Source Sans Pro", Sans Serif;
        }

        .btn{
            display: inline-block;
            width: 200px;
            font-weight: bold;
            padding: 10px;
            color: #fff;
            border: 4px solid #fff;
            text-align: center;
            outline: none;
            text-decoration: none;
            transition: background-color 0.2s ease-out, color 0.2s ease-out;
        }

        .btn:hover,.btn:active{
            background-color: #fff;
            color: #000;
            transition: background-color 0.3s ease-in, color 0.3s ease-in;
        }

        @media only screen and (max-width: 920px){
            .inner-container{
                margin-top: 100 px;
            }
        }

        @media only screen and (max-width: 540px){
            .inner-container{
                margin-top: 150px;
            }
            h1{
                font-size: 5em;
            }
            h2{
                font-size: 1.4em;
            }

两段相隔太远。我希望有人能帮助我...[页面看起来如何。][1]

Answer 1

通过在 css 中写入 *{height: 100%}，您告诉它让每个元素（又名 *）占据可用高度的 100%。这样做时，您的第一段占据了它所能达到的所有高度，将第二段压低了。

如果您要确保具有 100% 高度的唯一元素是白色背景，请考虑单独设置样式。

Answer 2

*{
   height: 100%;
}

您的 CSS 文件的一部分告诉页面上的每个元素与 window 的高度相同，因此第二个元素被下推。如果从 CSS 文件中删除该行，问题就会消失。

Answer 3

给予解决问题

    height: 10%;

到段落。

写两段，这些是隔开的！ IDK为什么

Writing two paragraphs, these are spaced apart! IDK why

html

css

paragraph