* selector creates space below html/body

HTML-CSS
1

For simple HTML:

When I apply CSS:

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid red;
    }

html, body {
width: 100%;
min-height: 100vh;
}

html {
border: 3px solid orange;

body {
border: 3px solid blue;
}

The orange HTML border is extended below the blue body border and it creates two red squares, one around the blue body element and one below it. Why there is the small space created below body?

2

Hi,
could you add what you’ve written in the HTML file? Probably inside a Blockquote, so it would stay formatted the same as it is in your file (I see your universal selector got turned into an unordered list element)?
It’s hard to guess what the red - bordered elements are and how they interact with the rest of the document without knowing what the rest of the code looks like.

3

Your code has been mangled by the browser.

To display code, use three backtics before and after a code block.
You can edit your original post to include the backtics.

If you cant find a backtic on your keyboard, use ALT + 096 to display one.

This is an example of using backtics:

image
image1243×193 4.33 KB

1 Like
4

For simple HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
  </body>
</html>

When I apply CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid red;
}

HTML, body {
  width: 100%;
  min-height: 100vh;
}

html {
  border: 3px solid orange;

body {
  border: 3px solid blue;
}

The orange HTML border is extended below the blue body border and it creates two red squares, one around the blue body element and one below it. Why there is the small space created below body?

6

You are missing a closing bracket }
image

What browser are you using to view your page?
Could you take a screen shot?

7

I am using Firefox.

border
border1888×676 113 KB

8

That’s odd, It shows just the orange and blue boxes for me. Honestly, I’m stumped. Since you’ve overwritten borders on both body and html elements, I don’t see anything that could possibly add those red boxes or the extra space.
You could open use the Developer Tools or the Inspect (F12 or Ctrl + Shift + C in Firefox) to see exactly what’s your browser is displaying. The only explanation I can think of is that some plugin on your browser adds those elements- it’s unlikely, but that’s the only theory I have for now.

9

It does sound like firefox is adding an element.
Microsoft Edge outputs this at the bottom:
image

Apparently browser extentions can inject elements into the dom.
You should be able to see what has been added using the Dev Tools

1 Like
10

You are right. It is Firefox. I have just tried in Chrome and there is no problem. Thank you for pointing it out.

2 Likes
11

I don’t think it’s just the Firefox- I’m using it as well, and to me, it looks like this:
borders
But if switching browsers works for you, then problem (sort of) solved, I guess:)

13

It was Grammarly extension in Firefox. Thank you all for help.

2 Likes