Question

我在一个容器div中有3个div标题中心和页脚，当我指定3个div的宽度和高度时，它们都很好并且工作正常但是当我在标题div中放置h1标题和段落标记然后标题div改变了他的旧位置并远离容器移动，所以我想加入/附加我的标题div与容器顶部边框，这是我的代码不能正常工作

HTML：

<div id="container">
    <div id="header">
        <h1>Inspiration For All By Fame Team</h1>
        <p style="color:white;">On This Blog You Can Read Many Stories Which Will Inspire You And Motivate You</p>
    </div>
    <div id="center"></div>
    <div id="footer"></div>
</div>

CSS：

body{
    background-color:#D8FFA8;
}

#container{
    background-color:#FFFFFF;
    width:80%;
    height:800px;
    margin-left:auto;
    margin-right:auto;
    border-style:solid;
    border-width:thick;
    border-color:#878787;
    border-radius:20px;
    padding:0;
    margin:0 auto;
}

#header{
    background-color:blue;
    width:100%;
    height:150px; 
    position:relative;
    padding:0;
    margin:0 auto;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}

我的图片here

Answer 1

考虑将margin和padding 0添加到所有元素：

＆＃13;

  * {
    margin: 0;
    padding: 0;
  }
  body {
    background-color: #D8FFA8;
  }
  #container {
    background-color: #FFFFFF;
    width: 80%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thick;
    border-color: #878787;
    border-radius: 20px;
    padding: 0;
    margin: 0 auto;
  }
  #header {
    background-color: blue;
    width: 100%;
    height: 150px;
    position: relative;
    padding: 0;
    margin: 0 auto;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Inspiration For All</title>
</head>

<body>`
  <div id="container">
    <div id="header">
      <h1>Inspiration For All By Fame Team</h1>
      <p style="color:white;">On This Blog You Can Read Many Stories Which Will Inspire You And Motivate You</p>
    </div>
    <div id="center">
    </div>
    <div id="footer"></div>
  </div>
</body>

</html>

＆＃13;

我的标题div不能附加容器

1 个答案: