1

The html height of this element is 47px.

body {
    line-height: 20px;
    margin: 8px;
    display: flow-root;

} 

.div {
    margin-top: 11px;
    margin-bottom: 10px;
}
<html>
<body>
  I am a body
  <div class="div"> 
  </div>
</body>
</html>

Is this because:

margin-top of body is 8px. line-height is 20px and there is only one line of text. body's block-formatting-context means divs 11px doesn't collapse with body's margin-bottom and so it expands body by 11px. body's margin-bottom adds 8px to expand html. This'd give a total of 47px.

Initially, I thought the margin-bottom of div would collapse with body's margin-bottom as I interpreted this site as saying block-formatting-context (BFC) didn't effect margin-bottom-collapsing.

tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • you didn't read the duplicate of your last question: https://stackoverflow.com/q/63907147/8620333 ... I gave a question that explain everything in detail. You are also answering your own question so I don't see what kind of answer are you expecting? you want us to told you: *yes* ? – Temani Afif Sep 16 '20 at 11:09
  • @TemaniAfif 1. Although that answer looks great I find I can't read it yet because I'm shaky with some of the jargon. I'm sure it'll be useful to come & later on I'd like to query what some of it means. 2. Yes I was looking for confirmation. Is that against the rules of SO? – tonitone120 Sep 16 '20 at 11:59

1 Answers1

1
  • Line-height is set to a fixed height = 20px
  • Margin is 8px top + 8px bottom = 16px
  • <div></div> has no content, and collapses to only recognize top margin = 11px

So, 20 + 16 + 11 = 47px

Bjorn.B
  • 1,473
  • 1
  • 10
  • 11