+ 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

30th Jan 2019, 4:56 AM
Gordon
Gordon - avatar
14 odpowiedzi
+ 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
Rowsej - avatar
30th Jan 2019, 6:38 AM
Gordon
Gordon - avatar
+ 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
Gordon - avatar
+ 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
Gordon - avatar
+ 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
Gordon - avatar
+ 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
Abrar Ahmad Rather - avatar
+ 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
Gordon - avatar
+ 2
I think it’s the <html> element’s border. Not 100% sure, though.
30th Jan 2019, 6:05 AM
Rowsej
Rowsej - avatar
+ 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
Gordon - avatar
30th Jan 2019, 6:24 AM
Rowsej
Rowsej - avatar
+ 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
Joshua Tse - avatar
+ 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
Joshua Tse - avatar
+ 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
Seniru - avatar
0
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
Joshua Tse - avatar