Writing two paragraphs, these are spaced apart! IDK why

Question

Writing two paragraphs, these are spaced apart. My paragraphs are very far and I don't understand why.

I tried to unlink css files, between the two paragraphs there was an empty line: missing in the code.

My page:

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

All my 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;
            }

The two paragraphs are too far apart. I hope someone can help me...[How the page looks.][1]

score 1 · Answer 1 · answered Aug 23 '19 at 17:22

1

By writing *{height: 100%} in your css, you are telling it to make every element (aka *) take up 100% of the available height. In doing so, your first paragraph is taking up all the height it can, pushing the second one all the way down.

If the only element you want to ensure has a 100% height is the white background, consider styling it individually.

answered Aug 23 '19 at 17:22

Phil

383
1
4
18

The element that needs a 100% height is the hero image at the top... Idk where i can move the line.... The page is crodattilodev.altervista.org/new if you want to see. – Crodattilo Aug 24 '19 at 10:46
Instead of assigning 100% height to everything and then resizing your hero element to shrink it to 70%, you may want to consider only specifying a height on the hero (here, your img-container). With lack of an immediate parent for the hero (other than your body), sizing it in % won't work. COnsider using pixels or vh (viewport-height). – Phil Aug 26 '19 at 16:10

score 1 · Answer 2 · answered Aug 23 '19 at 17:57

1

The

*{
   height: 100%;
}

part of your CSS file is telling every element on the page to be the same height as the window, so the second element is pushed down. If you remove that line from the CSS file the problem will go away.

answered Aug 23 '19 at 17:57

ronniegeraghty

11
1

score 0 · Accepted Answer · answered Sep 05 '19 at 07:47

0

Problem solved by giving

    height: 10%;

to the paragraphs.

answered Sep 05 '19 at 07:47

Crodattilo

1
3

Writing two paragraphs, these are spaced apart! IDK why

3 Answers3