Menu
I'm doing the Web Fundamentals course at Code Academy and noticed something strange.
If I have an html file like so:
<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
and a CSS file like so:
* {
border: 2px dashed black;
}
I will see two elements outlined. Something that seems like the very edge of my browser window, and then a slightly smaller box inside it. What are those two boxes? There are no elements in my HTML file so what is being outlined?
At first I thought it was an outline for the <html> and <body> elements, so I tried removing <body>, tried removing <head>, and eventually even removed <html> but still there are two boxes.
Thanks!
Edit: I did try searching, as recommended, but could not find a previous answer. It was quite hard to find an answer to this specific question, thanks.
991
The start and end tags for the html and body elements are optional.
You deleted the tags, but not the elements. You can see this by looking at the document in a DOM inspector (such as you can find in most browser developer tools).
(The same applies to head, but it is display: none by default).
110
Browsers will automatically put <html> around your document, <head> around your head elements, and <body> around your body elements. These are required HTML elements and cannot be absent.
Therefore, even an "empty" page has a visible <html> and <body> elements for your border to be applied to.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
