CODEWITHSUNDEEP
csspositiongoogle-chrome-devtools
rb612
rb612

Reputation: 5563

Chrome dev tools not highlighting entire body?

I'm wondering if this is a bug or (more likely) a misunderstanding in using the dev tools / CSS. I was playing around with a JSFiddle with the following style:

div.notrelative {
    height: 100px;
    width: 100px;
    background: #eaf;
    margin: 50px;
    font-size: 9px;
    position:relative;
    font-family: Arial;
}
body {
    margin:30px;
}
div.absolute {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #eea;
    margin-bottom: 10px;
    top: 0;
    left: 0;

and I was looking at the highlighted areas in dev tools both on JSFiddle and on a local copy, and I noticed something strange. Chrome was only highlighting a portion of the body in blue (after the top margin by the child element but strangely not the left margin), despite the body taking up the entire page (as seen by the gray background color). However, just creating something simple like a border around the body completely seems to fix the highlighting issue. Is there a reason why Chrome highlights differently in the two cases? enter image description here

enter image description here

Upvotes: 0

Views: 846

Answers (1)

pl61
pl61

Reputation: 63

Margin collapsing causes div.notrelative to extend its margins outside of <body> vertically and push <html> to be bigger than <body>. Thus, when you highlight <body>, the area beyond <body> but within <html> is not highlighted. That unhighlighted area represents the margins of div.notrelative. Adding borders prevents margin collapsing in the case of parent and first/last child.

As for why that area outside <body> is affected by its background-color, based on the answer here, it is because <html> takes the background-color of <body>.

Upvotes: 1

Related Questions