CODEWITHSUNDEEP
htmlcss
Muthukumar
Muthukumar

Reputation: 9579

Why html and body tag's height differs

Just want to understand how the height of the html tag is determined. (In chrome specifically) I am using this sample html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello</p>
</body>
</html>

Height of the body is 18px enter image description here

I was expecting the height of the html to be 18px + margins(8px + 8px) = 34px. But the actual height is 50px. Whats contributing to the extra height.

enter image description here

Upvotes: 2

Views: 151

Answers (2)

Temani Afif
Temani Afif

Reputation: 272703

you need to consider margin collapsing to find the height.

In your case, you have the default margin applied to p equal to 1em so 16px in your case. The body is also having a margin equal to 8px but since 16px is bigger so it's the one that will win (due to margin collapsing). So the height of html is equal to

16px + 16px + height of p element

The height of p element depend on the content and font-size. In your case it's 18px so you have your total of 50px

The height of body will only be 18px because all the margin are outside due to the margin collapsing.

More detail:

How to determine height of content-box of a block and inline element (to get more detail about the height calculation of p)

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

Upvotes: 2

Murtaza Mukhtar
Murtaza Mukhtar

Reputation: 37

That is not the height of the HTML tag, that margin belongs to the paragraph tag <p>Hello</p> and it is common and default in HTML paragraphs as I know.

Upvotes: 0

Related Questions