为什么我的标题和段落距离如此之远而没有边距或填充？答案

【问题标题】：Why are my header and paragraph distanced so far apart without a margin or padding?为什么我的标题和段落距离如此之远而没有边距或填充？
【发布时间】：2022-01-12 00:06:58
【问题描述】：

我正在为我的企业网站编写一个联系页面，但由于某种原因，当我运行我的代码时，我的标题和我的

段落相距很远，即使我将边距和填充都设置为 0。我不知道这是 CSS 故障还是我做错了什么。帮助将不胜感激。谢谢

<!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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/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>

【问题讨论】：

在您的 sn-p 中，它们相距不远，甚至重叠...

标签： html css padding margin

【解决方案1】：

这是因为您将段落绝对定位在页面上。您将其设置为top: 50%，这意味着将段落垂直放置在页面中间。

要居中，您可以简单地使用

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

【讨论】：

【解决方案2】：

.center 类似乎是您的包装类，将其从 p 标记中删除，并以 text-align:center 居中文本。

另一个选项 id 添加用于将标题居中的“flex-box 版本”：display: flex; place-content: center;

保留这样的东西：

<!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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/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>

【讨论】：