+ 11

<SOLVED> Mysterious HTML Element....

I can understand the outmost border is for body, I can understand the three borders for the three div, but why there is one more middle layer of border??? https://code.sololearn.com/WrvPuGd4mzWd/?ref=app

html border

30th Jan 2019, 4:56 AM

Gordon

14 Answers

+ 8

I know! It’s the :root sort-of-psuedo-element, which is the root of the HTML document.

30th Jan 2019, 6:18 AM

Rowsej

+ 6

Rowsej it really is~~ https://code.sololearn.com/WSJfUp9Ov2gf/?ref=app Thanks~

30th Jan 2019, 6:38 AM

Gordon

+ 4

Seniru Pasan you are right~ https://code.sololearn.com/WoebWz4Id6PG/?ref=app Html can also be used to style the outermost border. Thanks.

30th Jan 2019, 10:15 AM

Gordon

+ 3

https://code.sololearn.com/WbnC67IP7MwI/?ref=app No, the second outermost is body border. The outmost.... Still not known.

30th Jan 2019, 5:46 AM

Gordon

+ 3

Joshua Tse thank you for your attempt, I appreciate it. I do a little experiment: 1. I tried to remove the padding of html, https://code.sololearn.com/W34Zat0cN4sA/?ref=app 2. I tried to set body margin 0 https://code.sololearn.com/WvOighokC2nD/?ref=app 3. Both 0 https://code.sololearn.com/Wz6c7T7tQo9x/?ref=app

30th Jan 2019, 10:14 AM

Gordon

+ 3

box 1 is for <html>. box 2 is for <body>. box 3 is for first <div>. 4th box is for second <div> followed by <p>. if you follow the same way of calculating the boxes you will get it. another thing i want to mention is that your code has unnecessary </span> tag.

30th Jan 2019, 6:53 PM

Abrar Ahmad Rather

+ 3

Dear Abrar Ahmad Rather, thanks for your answer. The span tag is for demo the effect of * selector, which is the purpose of example 1.3

31st Jan 2019, 1:17 AM

Gordon

+ 2

I think it’s the <html> element’s border. Not 100% sure, though.

30th Jan 2019, 6:05 AM

Rowsej

+ 2

Hmmm... So html border will appear outside body border, but html text will appear inside body border?

30th Jan 2019, 6:13 AM

Gordon

+ 1

Gordon

30th Jan 2019, 6:24 AM

Rowsej

+ 1

Do you encounter similar problems on your desktop If you don't then the problem has something to do with sololearn compiling or execution systems

30th Jan 2019, 8:32 AM

Joshua Tse

+ 1

Do you encounter similar problems on your desktop If you don't then the problem has something to do with sololearn compiling or execution systems

30th Jan 2019, 8:32 AM

Joshua Tse

+ 1

I found it s the HTML tags after using dev tools. Probably it should be because you defined a style rule for *. Changing that could help to get rid of the outermost border.

30th Jan 2019, 10:03 AM

Seniru

Hey Gordon I think I've found an answer to the problem It has to do with the padding check this out https://www.sololearn.com/learn/CSS/1099/ It's in CSS

30th Jan 2019, 9:54 AM

Joshua Tse