Parent respect child's margin? and add a border to disable it?

MDN Learn
#1

With the following, there is a about 20px height gap at the beginning, I know h1 has default margin, and it seems div decides to respect that margin, I’m not sure the reason, I remeber the CSS part of the learn web devlopment does explain margin collposing when two adjacent siblings touchs, but what about parent and child? Another stange thing is, if I add a border to the div, then the gap disappers, it seems it decides no longer to respect the margin of h1, I don’t understand the reason.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
      body {
        margin: 0;
      }

      div {
        background-color: blue;
        color: white;
        /* border: 1px solid black; */
      }
    </style>
  </head>
  <body>
    <div>
      <h1>test</h1>
    </div>
  </body>
</html>
#2

hello @Xu_Chunyang

it’s depend in many factor is the element you talk is block or inline and the display settings

hope that help and have a nice day

#3

Thanks for the reply. I have a maybe related quesiton about background-color in the box mode.

background-color applys to the content and padding box, right? So if both height of content and padding box are 0, the background-color will not show, but this is not true in the following case, since body is empty so it’s 0 height, but the background color fills the whole window, why?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
      body {
        border: 1px solid black;
        background-color: red;
      }
    </style>
  </head>
  <body></body>
</html>
#4

for background it’s not always apply to content and padding there are property that can make it apply for only content also i forget the property name right now but i will try to check it

but without that property you are right it apply to both

the body has width and height default to initial if you inspect your code you wll see the width and height

just a general rule if you did not use a property with value that does not mean that this property does not have default value

for example if you did not specify the font family then the browser will pick the user setting and if not exist then it will apply it’s default

hope that make it clear and have a nice day

#5

| justsomeone
July 28 |

  • | - |

for background it’s not always apply to content and padding there are property that can make it apply for only content also i forget the property name right now but i will try to check it

but without that property you are right it apply to both

the body has width and height default to initial if you inspect your code you wll see the width and height

it says the body has 1422x0, no content, no padding, 1px border, 8px margin, it’s expected since the body is empty, it seems the body element is unusual, the background of the body always fulfills the window, ignoring border and margin.

#6

try adding padding 10px and you will see the boundry of the body

now for the question why the full view-port background is red

check this https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

1 Like
#7

Thanks this link does answer my question on body’s background-color.

It seems my original question is the same as this SO question, the accepted answer mentions Collapsing margins. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Margin_collapsing doesn’t mention this specific case, but it contains a link to https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing, it likely explains the issue, I need some time to read and digest. For now, I consider my question answered.

#8

you welcome and have a nice day :slight_smile: