Question

我发现了一个我想了解的身体元素的奇怪行为。有了<body>元素margin：0和<html>元素padding：0，为什么body元素跟随<p>元素的margin？但是，如果您将一些内容放入<body>元素中，则行为将是根据样式设置所期望的，并且<body>元素会升至人们期望的位置。

情况A）<body>没有内容，下降了150px，跟随着<p>的空白。

    <head>
    <style>
        html {padding :0px;
              background-color: red;
        }
        body {
            margin:0;
            background-color: green;
        }
        p{  margin : 150px auto;
            border: solid ;
            background-color: yellow;
            height: 250px;
            width: 400px;

        }
        div{
          margin : 150px auto;
            border: solid ;
            background-color: yellow;
            height: 250px;
            width: 400px;

        }
          </style>
</head>
<body>
    <p> 2</p>
    <p> 3</p>
    <p> 4</p>
    <p> 5</p>
    <p> 6</p>
</body>

场景B）与A相同，但是现在您将内容放入<body>，然后没有遵循<p>的边距150px。

    <head>
    <style>
        html {padding :0px;
              background-color: red;
        }
        body {
            margin:0;
            background-color: green;
        }
        p{  margin : 150px auto;
            border: solid ;
            background-color: yellow;
            height: 250px;
            width: 400px;

        }
        div{
          margin : 150px auto;
            border: solid ;
            background-color: yellow;
            height: 250px;
            width: 400px;

        }
          </style>
</head>
<body>
  CONTENT
    <p> 2</p>
    <p> 3</p>
    <p> 4</p>
    <p> 5</p>
    <p> 6</p>
</body>

<body>元素的A和B行为解释是什么？

谢谢。

奇怪的行为主体元素

0 个答案: