The body element obeys the div element

Question

The body element obeys the div element

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm starting with css and html. Trying to do some things I have found a behavior that I can not explain. The body element should be covering the entire html element because the html padding is 0. However, by adding an upper margin of 150px to the <p> element, the body separates from the html element and distances itself from above. What I do not understand is why the margin of the element <p> is distanced from above. I would like the <p> element to be 150px separate from the body, but the body was not separated above the html those 150px. If I put in <html> padding: 0, and in <body> margin: 0, this would have to result that the body is completely stuck on top, just as it is on the sides. What explanation does this behavior have? Greetings

<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;

        }

    </style>
</head>
<body>

    <p> 1</p>
    <p> 2</p>
    <p> 3</p>
    <p> 4</p>
    <p> 5</p>
    <p> 6</p>

</body>

html css

asked by nikos 20.08.2018 в 16:42

source

2 answers

how can I get a value that is within two dictionary Unknown Error when executing a query in PHP to a table containing Foreign Keys

score 0 · Answer 1

The body has a default margin you can document a bit from here link

When assigning values to the html, you modify what you have by default. Just remove the css for the HTML and the body will cover everything.

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      background-color: green;
    }

    p {
      margin: 150px auto;
      border: solid;
      background-color: yellow;
      height: 250px;
      width: 400px;
    }
  </style>
</head>


<body>
  <p> 1</p>
  <p> 2</p>
  <p> 3</p>
  <p> 4</p>
  <p> 5</p>
  <p> 6</p>
</body>        
</html>

You can see it working here link

score 0 · Answer 2

I kept looking and found where the problem is.

link .

The questión is that between two containers if there is no separation between them, and the margins are touched, then the effect known as " collapcing " occurs. So that this does not happen and each one behaves "independently" the margins have to be separated in some way. To separate the margins of two containers, in this case <body> and <p> , you can put in the outer element a padding, a border, some content, or also use overflow:hidden . Probably this last one is the most appropriate since you do not have to add any padding or border, which at some point can be annoying (although according to how the overflow: hidden does not just work for me).

body {
      margin: 0;
      background-color: green;
      padding : 1px;
    }

or tambén:

body {
          margin: 0;
          background-color: green;
          border: solid;
        }

I add something else that I have found and that it is quite important to know about the behavior of the background properties of <html> and <body> .

a) link

b) link

Greetings.