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

时间:2017-10-08 01:49:04

标签: html css

我体内有两个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>

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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

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

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