Question

我体内有两个div元素。

第一个div是position：fixed，但是当我向第二个div添加一个段落时，第一个div从页面顶部向下移动~20px。

如何在一个div中添加一个段落，影响布局上前一个div的位置？

在下面的代码中，第二个div中有一个段落。这是我指的段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>    
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">

    <div style=" 
            background-color:#717777; 
            height: 50px;
            width: 100%;
            position:fixed;
            padding: 30px;
            ">
        <h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
        <h2 style="color:#282828; margin: 0;" >This is a test website</h1>
    </div>

    <div>
        <p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
    </div>
</body>
</html>

Answer 1

这是因为p标签默认为margin，因此您只需使用p {margin: 0;}重设此边距。以下是工作示例：

＆＃13;

p {
  margin: 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>    
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">

    <div style=" 
            background-color:#717777; 
            height: 50px;
            width: 100%;
            position:fixed;
            padding: 30px;
            ">
        <h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
        <h2 style="color:#282828; margin: 0;" >This is a test website</h1>
    </div>

    <div>
        <p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
    </div>
</body>
</html>

＆＃13;

Answer 2

这是因为您没有将元素垂直放置在任何位置，因为您没有设置任何top或bottom偏移量，因此如果它是其中的一部分，则将其置于将定位的位置文件流程。这意味着它将根据文档流程的边距与文档流程中的第一个元素对齐。

文档流中的第一个元素恰好是<p>。

正确解决您的问题是在top:0;元素上设置fixed。有关更详细的说明，请阅读您重复的问题的accepted answer。

其他可能的（不正当的，恕我直言）“修正”正在调整文档流程中的第一个元素，从文档顶部开始，通过覆盖<p>到0的默认边距或设置它的显示属性为inline-block（或任何其他inline类型的显示。）

将<p>添加到一个div，正在移动其他div

2 个答案: