Why are my header and paragraph distanced so far apart without a margin or padding?-CodePudding

I am in the process of coding a contact page for my business's website but for some reason, when I run my code, my header and my

paragraph are distanced very far apart even though I set both the margin and padding to 0. I don't know if this is a CSS glitch or if I did something wrong. Help would be very much appreciated. Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="contact-style.css" rel="stylesheet" type="text/css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <title>Document</title>

    <style>
body{
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    overflow-x: hidden;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#hero{
    border-radius: 15px;
    margin-top: -0.8%;
    background: rgb(14,39,79);
    background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);    
    width: 98.5%;
    height: 94%;
}

h1{
    color: white;
    font-weight: 400;
    font-size: 400%;
    display: flex;
    place-content: center;
    margin-top: 20vh;
    margin-bottom: 0;
    padding-bottom: 0px ;
}

p{
    color: #CFCDD4;
    margin-top: 0;
    padding-top: 0px;
}

#expand-arrow{
    color: white;
    margin-top: 37.5vh;
    transform: scale(2.5); 
    transition: 0.4s ease;
}

#expand-arrow:hover{
    margin-top: 38.7vh;
}
    </style>
</head>
    <body>
        
        <div id = "hero" class = "center">
            <h1>Contact</h1>
            <p class = "center">Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
            <ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
        </div>

  </body>

</html>

CodePudding user response：

It's because you are positioning your paragraph absolutely on the page. You have it set as top: 50%, which means place the paragraph in the middle of the page vertically.

To center it, you can simply use

.center-text {
  text-align: center;
}

CodePudding user response：

The .center class seems to be your wrapper class, remove it from the p tag, and center the text with text-align:center.

Another option id add the "flex-box version" you used to center the title: display: flex; place-content: center;

Keep something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="contact-style.css" rel="stylesheet" type="text/css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <title>Document</title>

    <style>
body{
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    overflow-x: hidden;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#hero{
    border-radius: 15px;
    margin-top: -0.8%;
    background: rgb(14,39,79);
    background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);    
    width: 98.5%;
    height: 94%;
}

h1{
    color: white;
    font-weight: 400;
    font-size: 400%;
    display: flex;
    place-content: center;
    margin-top: 20vh;
    margin-bottom: 0;
    padding-bottom: 0px ;
}

p{
    color: #CFCDD4;
    margin-top: 0;
    padding-top: 0px;
    text-align:center;
}

#expand-arrow{
    color: white;
    margin-top: 37.5vh;
    transform: scale(2.5); 
    transition: 0.4s ease;
}

#expand-arrow:hover{
    margin-top: 38.7vh;
}
    </style>
</head>
    <body>
        
        <div id = "hero" class = "center">
            <h1>Contact</h1>
            <p>Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
            <ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
        </div>

  </body>

</html>